在jQuery UI对话框中放置一个jQuery UI手风琴

Question

通过创建适当的标记来制作选项卡，我已经能够将jQuery UI Tabs小部件放置在jQuery UI Dialog中；但是使用手风琴却没有成功：单击手风琴部分的锚点会导致对话框关闭。有没有一种简单的方法来实现这个？

- Tim

Answer 1

对我来说运行良好... 我为你发布了演示。

也许你需要在dialog函数中使用"open"选项？

  $(function() {
    $("#dialog-modal").dialog({
      height: 400,
      width: 400,
      modal: true,
      open: function(){
        $("#accordion").accordion({ autoHeight: true });
      }
    });
  });

注意：对于选项卡，基本上是相同的操作，只需在"open"选项中添加函数调用即可。

- Mottie

---

非常感谢！运行得很好。不知道为什么我的对话框在单击手风琴部分标题时会关闭。它的设置与您的相同，尽管我的不是模态的，就像您的示例一样，我还有多个可堆叠的对话框；但我更改了您的示例以反映这些差异，它仍然有效。现在我知道这是可能的，我可以搜索可能导致我的页面出问题的原因。再次感谢。 - Tim

Answer 2

你可以创建一个用于对话框的div，以及一个在其中用于手风琴的div。

HTML片段：

<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();

});

请查看这里的范例： http://jsfiddle.net/saylesc/RDwUj/2/

- Corndog