如何在ASP.Net中实现Chrome之类的标签？

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

我已就此主题研究了现有的SO帖子,似乎没有一个令人满意的答案。

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:

我试图在ASP.Net MVC3中实现类似Chrome的标签行为,特别是标签将具有以下行为:

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.

被拖出并独立作为页面上的可拖动div。我正在考虑使用iFrame的jQuery对话框。需要有关如何使其看起来像标签的帮助/建议。

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?

点数2可能很容易实现 - 我只是隐藏div并重建标签,但是有人做过#1和/或可以帮我指出一个起跑方向吗?

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

每个选项卡对应一个局部视图(mvc)/用户控件(web表单)。

2 个解决方案

#1

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.

无论如何,我会使用Telerik Kendo UI控件及其基本API功能,并使用自己的javascript JQuery代码组合和增强它们。

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

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

基本上,你知道,它们是一个非常方便的与ASP.NET特别是MVC的组合!

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

对于你的问题,作为一种方法,我会看到TabStrip和窗口使用!!

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

查看他们的客户端API事件: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.

并想象一下JQuery的Draggable Droppable等的组合使用,http://jqueryui.com/draggable/,然后与TabStrip html元素一起使用。

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

总结一下,我主要在我的javascript块中使用以下功能:

JQuery basics, and specially Draggable Dropable used on the TabStrip / Window - HTML-elements (find out what elements are used via FireBug)

JQuery基础知识,特别是TabStrip / Window上使用的Draggable Dropable - HTML元素(找出通过FireBug使用的元素)

Kendo UI API events and methods: open, close, bind etc.

Kendo UI API事件和方法:打开,关闭,绑定等。

#2

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

谢谢大家的帮助!我最终做了以下事情:

Styled an unordered list (ul) as tabs

将无序列表(ul)设置为标签

Made each list item (li) draggable

使每个列表项(li)可拖动

On the onstop event of the li, open a dialog (with an iframe) at the current mouse position.

在li的onstop事件中,在当前鼠标位置打开一个对话框(带有iframe)。

Set the src attribute of the iframe to the tab content.

将iframe的src属性设置为选项卡内容。

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 / li的HTML:

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

#1