Jquery ui对话框小部件与标签

我正在寻找一个JQuery小部件混合对话框和标签。这个想法是关闭在与选项卡相同的行，并为ok/cancel按钮选项。在stackoverflow有一个旧的条目，但它不适用于最新的Jquery UI版本 - 1.8。Jquery ui对话框小部件与标签

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

----- UPDATE -------------

从迪迪埃答案工作正常，我修改了他的答案添加按钮和更改按钮，一个jQuery图标创建一个jquery-ui小部件 - >这里是code/example。

如果有人发现如何将硬编码的CSS移动到实际的CSS会受到欢迎。

来源

2012-02-11 ic3

我跟着你给了，但以另一种方式实现的链接的例子：

您可以在选项卡按钮标记添加一个<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> 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

来源

2012-02-12 01:00:49

感谢您的回答，一个问题，是否有一个理由为什么选项卡是在“打开”而不是“创建”对话框上创建的？ – ic3 2012-02-12 10:15:02

我刚刚从链接中获取了示例，但可以使用对话框的“创建”事件来初始化标签（[示例]（http://jsfiddle.net/didierg/Pn9HM/））。 – 2012-02-12 10:19:47

感谢您的帮助。我只是修改你的例子添加按钮，并更改图标（我更新了问题），只是有点麻烦与css – ic3 2012-02-12 10:57:39

只需推动按钮，在dialog open函数：

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

来源

2012-02-12 01:55:12 pete

Jquery ui对话框小部件与标签

回答

相关问题