Question

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

我正在尝试在ASP.Net MVC3中实现类似Chrome的标签行为，特别是标签会有以下行为：

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

点数2可能很容易实现 - 我只是隐藏div并重新构建标签，但是有没有人做过＃1和/或可以帮我指出一个出发方向？

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

Answer 1

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

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

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

-

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

查看客户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事件和方法：打开，关闭，绑定等。

Answer 2

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

将无序列表（ul）设置为标签
制作每个列表项目（li）draggable
在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>

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

2 个答案: