Question

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

任何机会，在做我自己的版本之前，有人想分享现有的解决方案吗？

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

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

如果有人发现如何将硬编码的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插件将其视为可能的标签按钮，如果它无法对其执行任何操作，则会创建一个禁用标签，这使得撤消变得更加困难。

然后，在选项卡的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

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

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

2 个答案: