How to implement Chrome like tabs in ASP.Net?

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:

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.
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).

Perhaps you could use Telerik's TabStrip to start out and do some heavy customization in dealing with dragging and dropping. It would be more or less taking the tab and somehow moving the contents to where you want them. Sounds like an interesting idea at the very least and would love to see what you come up with. — IyaTaisho
– IyaTaisho, Commented Dec 4, 2012 at 16:13
Thanks @IyaTaisho - I'd rather not use Telerik if I can help it. I'll post an update of what I end up doing. — Laguna
– Laguna, Commented Dec 4, 2012 at 16:21
I understand. You may want to check out how jQuery does them. Here is a link to their ui version: link. — IyaTaisho
– IyaTaisho, Commented Dec 4, 2012 at 17:10

florian.isopp · Accepted Answer · 2012-12-05 17:49:31Z

I would anyhow use the Telerik Kendo UI Controls with their basic API features and would combine and enhance them with own javascript JQuery code.

http://demos.kendoui.com/web/tabstrip/index.html

Basically, you know, they are a very convenient combination with ASP.NET especially MVC!

-

And for your question, as an approach I would see the TabStrip and the Window to use!!

Take a look on their Client API events: http://docs.kendoui.com/api/web/window

And imagine combinational usage of JQuery's Draggable Droppable etc., http://jqueryui.com/draggable/ , then to be in use with the TabStrip html-elements.

Summarized, I would mainly use in my javascript block following features:

JQuery basics, and specially Draggable Dropable used on the TabStrip / Window - HTML-elements (find out what elements are used via FireBug)
Kendo UI API events and methods: open, close, bind etc.

Laguna · Accepted Answer · 2012-12-06 21:23:18Z

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>

Collectives™ on Stack Overflow

How to implement Chrome like tabs in ASP.Net?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related