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

您可以添加< 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