Jquery UI对话框小部件与选项卡

Question

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

在自己创建版本之前，是否有人想分享现有的解决方案？

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

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

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

- ic3

Answer 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> 标签，但您也可以使用其他类型的元素。您可以使用锚标签，但选项卡插件会将其视为可能的选项卡按钮，如果它不能对其执行任何操作，则会创建一个禁用的选项卡，这使得撤消操作有些困难。

然后，在选项卡的创建事件中绑定 <button> 的点击事件以关闭对话框。

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

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

使用这个CSS代码，您可以将关闭按钮放到右侧:

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

演示

---

以下是应用于去除硬编码的 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

- Didier Ghys

---

谢谢你的回答。我有一个问题，为什么选项卡是在打开对话框时创建而不是在创建对话框时创建的？ - ic3

我刚刚从你的链接中拿了一个例子，但你可以使用对话框的“create”事件来确保初始化选项卡（示例）。 - Didier Ghys

谢谢您的帮助。我刚刚修改了您的示例，添加了按钮并更改了图标（我更新了问题），只是在CSS方面有一点小麻烦。 - ic3

谢谢你的支持，你认为在对话框中加入可拖动的标题栏是可能的吗？（我知道我有点滥用了）？ - ic3

我懂了，只需在父级的div上使用正确的句柄（奇怪需要对话框小部件的父级）。如果您需要，我欠您一个，请保持联系，谁知道呢 :-) - ic3

Answer 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);
},

- pete