带有选项卡的 Jquery ui 对话框小部件答案

【问题标题】：Jquery ui dialog widget with tabs带有选项卡的 Jquery ui 对话框小部件
【发布时间】：2012-02-12 21:24:17
【问题描述】：

我正在寻找一个 JQuery 小部件混合对话框和选项卡。这个想法是将关闭与选项卡放在同一行，并为确定/取消按钮提供一个选项。 stackoverflow 中有一个旧条目，但它不能与最新的 Jquery UI 版本 - 1.8 一起正常工作。

在做我自己的版本之前，有人想分享一个现有的解决方案吗？

----- 更新 -------------

Didier 的回答很好，我修改了他的回答以添加按钮并将按钮更改为 jquery 图标并创建 jquery-ui 小部件 -> 这是code/example。

如果有人发现如何将硬编码的 css 移动到实际的 css 中，那将受到欢迎。

【问题讨论】：

标签： jquery jquery-ui jquery-tabs jquery-dialog

【解决方案1】：

我遵循了您提供的链接中的示例，但以另一种方式实现：

您可以在标签按钮标记中添加<li>：

<ul>
    <li><a href="#tab-info">Information</a></li>
    <li><a href="#tab-cast">Cast List</a></li>
    <li class="ui-tabs-close-button"><button id="closeBtn">X</button></li>
</ul>

我在这里使用了<button>，但您可以使用其他类型的元素。您可以使用锚标记，但 Tabs 插件将其视为可能的选项卡按钮，如果无法对其执行任何操作，则会创建一个禁用的选项卡，这使得撤消变得有点困难。

然后，在Tabs的create事件中绑定<button>上的点击事件，关闭对话框：

$('#tabs-movie').tabs({
    create: function(e, ui) {
        $('#closeBtn').click(function() {
            $('#dialog-movie-info').dialog('close');
        });
    }
});

使用这段 CSS，您可以将关闭按钮放在右侧：

.ui-tabs-nav li.ui-tabs-close-button {
    float: right;
    margin-top: 3px;
}

DEMO

这是用于删除硬编码 css 样式的 css：

.ui-dialog .ui-dialog-buttonpane {
    border: 0;
    margin: 0;
}

.ui-dialog .ui-dialog-buttonpane button {
    margin: 0.5em 0em 0.5em 0.4em;
}

DEMO

【讨论】：

感谢您的回答，一个问题，为什么标签是在“打开时”而不是“在创建”对话框时创建的？
我只是从您的链接中获取示例，但您可以使用对话框的“创建”事件来确定初始化选项卡 (example)。
感谢您的帮助。我刚刚修改了您的示例以添加按钮并更改图标（我更新了问题），只是 css 有点麻烦
非常感谢，您认为可以为对话框设置可拖动的标题吗（我知道有点滥用）？
我明白了，只需使用正确的句柄将可拖动对象放在父级的 div 上（奇怪的是需要对话框小部件的父级）。我欠你一个，以防你需要它，谁知道:-)

【解决方案2】：

只需移动dialog打开函数中的按钮：

open: function() {
    var li = $('<li />').append($(this).siblings().find('a.ui-dialog-titlebar-close').css('float', 'right').detach());
    $('#tabs-movie').tabs();
    $('#tabs-movie ul.ui-tabs-nav').append(li);
},

【讨论】：