Question

I have researched the existing posts on SO for this topic and none seems to have a satisfying answer.

I am trying to achieve a tab behavior that’s like Chrome’s in ASP.Net MVC3, specifically the tabs will have the following behaviors:

1. Be dragged out and standalone as a draggable div on page. I’m thinking of using jQuery dialog with iFrame. Need help/suggestion on how to make it look like a tab.
2. Once minimized, go back as a tab in the existing tab container

point number 2 is probably easy to achieve – I just hide the div and reconstruct the tabs, but has anyone done #1 and/or can help point a starting direction for me?

Each tab corresponding to a partial view (mvc)/user control(web form).

Answer 1

Thanks everybody for your help! I ended up doing the followings:

• Styled an unordered list (ul) as tabs
• Made each list item (li) draggable
• On the onstop event of the li, open a dialog (with an iframe) at the current mouse position.
• Set the src attribute of the iframe to the tab content.

Code snippets below:

$('li').draggable({
            iframeFix: true,
            stop: function (event) {
                var title = //give a title
                var newId = //create a unique id

                $('#draggableTabsContainer').append('<div id="' + newId + '"></div>');

                var x = $(this).position().left;
                var y = $(this).position().top;

                $('#' + newId).dialog({
                    iframe: true,
                    autoOpen: false,
                    width: 700,
                    height: 700
                });

                $('#' + newId).append($("<iframe id='frm" + newId + "' class='tab-iframe'/>")).dialog('open');

                var url = $(this).find('a.tab').data('src');

                $('#frm' + newId).attr('src', url);

                $('#' + newId).dialog({ position: [x, y], 'title': title });


                $(this).remove();

            }
        });

HTML of the ul/li:

<ul id="tablist">
        <li><a class="tab" href="#" data-src="controller_name/view_name1"><b>View 1</b></a></li>
        <li><a class="tab" href="#" data-src="controller_name/view_name2"><b>View 2</b></a></li>
</ul>