2

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

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

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

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

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

4

2 回答 2

1

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

http://demos.kendoui.c​​om/web/tabstrip/index.html

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

-

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

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

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

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

  • JQuery 基础知识，特别是 TabStrip / Window 上使用的 Draggable Dropable - HTML 元素（通过 FireBug 找出使用了哪些元素）
  • Kendo UI API 事件和方法：打开、关闭、绑定等。
于 2012-12-05T17:49:31.853 回答
0

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

  • 将无序列表 (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();

            }
        });

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>
于 2012-12-06T21:23:18.277 回答