通过创建适当的标记来制作选项卡,我已经能够将jQuery UI Tabs小部件放置在jQuery UI Dialog中;但是使用手风琴却没有成功:单击手风琴部分的锚点会导致对话框关闭。有没有一种简单的方法来实现这个?
对我来说运行良好... 我为你发布了演示。
也许你需要在dialog函数中使用"open"选项?
$(function() {
$("#dialog-modal").dialog({
height: 400,
width: 400,
modal: true,
open: function(){
$("#accordion").accordion({ autoHeight: true });
}
});
});
注意:对于选项卡,基本上是相同的操作,只需在"open"选项中添加函数调用即可。<button id='clicker>Click Me</button>
<div id='dialog'>
<div id='accordion'>
<h3>Section 1</h3><div><p>Sec 1 Fun</p></div>
<h3>Section 2</h3><div><p>Sec 2 Fun</p></div>
</div>
</div>
JavaScript代码段:
$('#clicker').button().click(function(){
var overlayDialogObj = {
autoOpen: true,
height: 400,
width: 310,
modal: false,
open: function(){
$('#accordion').accordion(
{heightStyle: "fill", collapsible: true}).show();
},
buttons: {
'Done': function() {
$(this).dialog('close');
}
}
};
$('#dialog').dialog(overlayDialogObj).show();
});