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

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

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

—–更新————-

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

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

我按照您提供的链接中的示例进行了操作,但是以另一种方式实现：

您可以添加< 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>上绑定点击事件.在Tabs的create事件中关闭对话框：

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