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

Question

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

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

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

Didier的答案很好,我修改了他的答案,添加按钮并将按钮更改为jquery图标并创建一个jquery-ui小部件 - >这是代码/示例.

如果有人发现如何将硬编码的css移动到实际的css,那将是受欢迎的.

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>但你可以有另一种类型的元素.您可以使用锚标记,但Tabs插件将其视为可能的标签按钮,如果它无法对其执行任何操作,则会创建禁用标签,这使得撤消变得更加困难.

然后,<button>在选项卡的create事件中绑定click事件以关闭对话框:

$('#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