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

【问题标题】：How to implement Chrome like tabs in ASP.Net?如何在 ASP.Net 中实现类似 Chrome 的选项卡？
【发布时间】：2012-12-04 15:58:01
【问题描述】：

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

我正在尝试实现类似于 ASP.Net MVC3 中 Chrome 的选项卡行为，特别是选项卡将具有以下行为：

被拖出并作为页面上的可拖动 div 独立。我正在考虑将 jQuery 对话框与 iFrame 一起使用。需要有关如何使其看起来像标签的帮助/建议。
最小化后，作为现有标签容器中的标签返回

第 2 点可能很容易实现 - 我只是隐藏 div 并重新构建选项卡，但有没有人完成第 1 点和/或可以帮助为我指明起始方向？

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

【问题讨论】：

也许您可以使用 Telerik 的 TabStrip 开始并在处理拖放时进行一些重度定制。它会或多或少地使用选项卡并以某种方式将内容移动到您想要的位置。听起来至少是一个有趣的想法，很想看看你的想法。
感谢@IyaTaisho - 如果我能提供帮助，我宁愿不使用 Telerik。我将发布我最终所做的更新。
我明白了。你可能想看看 jQuery 是如何做到的。这是他们的 ui 版本的链接：link.

标签： jquery asp.net asp.net-mvc-3 jquery-ui jquery-ui-tabs

【解决方案1】：

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

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

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

对于您的问题，作为一种方法，我会看到 TabStrip 和 Window 来使用！！

查看他们的客户端 API 事件：http://docs.kendoui.com/api/web/window

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

总结一下，我主要会在我的 javascript 块中使用以下功能：

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

【讨论】：

【解决方案2】：

感谢大家的帮助！我最终做了以下事情：

将无序列表 (ul) 设置为制表符
使每个列表项 (li) 可拖动
在 li 的 onstop 事件中，在当前鼠标位置打开一个对话框（带有 iframe）。
将 iframe 的 src 属性设置为标签内容。

下面的代码sn-ps：

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

            }
        });

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>

【讨论】：