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

我正在寻找一个混合对话框和选项卡的JQuery小部件。这样做的目的是使“关闭”与选项卡位于同一行，并为“确定/取消”按钮提供一个选项。中有一个旧条目，但在最新的jQueryUI版本-1.8中无法正常工作

在执行我自己的版本之前，是否有人希望共享现有的解决方案

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

Didier的答案很好，我修改了他的答案，添加了按钮，并将按钮更改为jquery图标，创建了一个jquery ui小部件->下面是答案

---

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

我遵循了您给出的链接中的示例，但以另一种方式实现：

您可以在选项卡按钮标记中添加

：

<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>

使用此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;
}

---

只需移动

对话框中的按钮

打开功能：

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

open:function（）{
var li=$（“
”）.append（$（this）.sides（）.find（'a.ui-dialog-titlebar-close'）.css（'float'，'right'）.detach（））；
$（'#tabs movie'）.tabs（）；
$（'#tabs movie ul.ui tabs nav'）.append（li）；
},

谢谢你的回答，一个问题，为什么选项卡是“打开时”而不是“创建时”创建的？我只是从你的链接中取了一个例子，但是你可以使用对话框的“创建”事件来初始化选项卡（）。谢谢你的帮助。我刚刚修改了您的示例，添加了按钮并更改了图标（我更新了问题），只是cssThanks有点小问题，非常好，您认为可以为对话框设置可拖动的标题吗（我知道有点滥用）？我明白了，只需使用正确的句柄在父级的div上设置可拖动（奇怪的是需要对话框小部件的父控件）。如果你需要，我欠你一个，谁知道呢：-）

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