Jquery 如何在ASP.Net中实现类似Chrome的选项卡？

我已经研究了关于这个主题的现有帖子，但似乎没有一个令人满意的答案

我正在尝试实现一种选项卡行为，它类似于ASP.Net MVC3中的Chrome，具体来说，选项卡将具有以下行为：

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

最小化后，作为现有选项卡容器中的选项卡返回

第二点可能很容易实现——我只是隐藏div并重新构建选项卡，但是有人做过#1和/或可以帮助我指出一个开始的方向吗

---

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

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

基本上，你知道，它们是与ASP.NET的非常方便的组合，尤其是与MVC的组合

-

对于您的问题，作为一种方法，我将看到要使用的选项卡条和窗口

查看他们的客户端API事件：

想象一下组合使用JQuery的Dragable Dropable等，然后与TabStrip html元素一起使用

概括起来，我将主要在javascript块中使用以下功能：

• JQuery基础知识，特别是用于TabStrip/Window-HTML元素的Dragable Dropable（通过FireBug了解使用了哪些元素）
• 剑道UI API事件和方法：打开、关闭、绑定等

---

谢谢大家的帮助！我最终做了以下几件事：
• 将无序列表（ul）设置为选项卡
• 使每个列表项（li）可拖动
• 在li的onstop事件中，在当前鼠标位置打开一个对话框（带有iframe）
• 将iframe的src属性设置为选项卡内容
下面是代码片段：

$('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();

            }
        });

$（'li'）。可拖动({
iframeFix：是的，
停止：功能（事件）{
var title=//给出一个标题
var newId=//创建一个唯一的id
$（“#DragableTabsContainer”）.append（“”）；
var x=$（this）.position（）.left；
变量y=$（this）.position（）.top；
$（'#'+newId）.对话框({
伊夫拉姆：是的，
自动打开：错误，
宽度：700，
身高：700
});
$（'#'+newId）.append（$（“”）.对话框（'open'）；
var url=$（this）.find（'a.tab'）.data（'src'）；
$（'frm'+newId）.attr（'src'，url）；
$（'#'+newId）.dialog（{position:[x，y]，'title'：title}）；
$（this.remove（）；
}
});

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>

也许您可以使用Telerik的TabStrip开始，并在处理拖放时进行大量定制。这将或多或少地承担费用，并以某种方式将内容移动到您想要的地方。至少听起来是个有趣的主意，我很想看看你有什么想法。谢谢@IyaTaisho-如果我能帮上忙，我宁愿不用Telerik。我会发布我最后所做事情的更新。我理解。您可能想了解jQuery是如何实现这些功能的。以下是指向其ui版本的链接：。