在jQuery UI对话框中放置一个jQuery UI Accordion

By creating the appropriate markup for Tabs, I've been able to place a jQuery UI Tabs widget inside a jQuery UI Dialog; but doing the same with an Accordion has not worked: clicking on the anchor of the accordion section causes the Dialog to close. Is there a straightforward way to accomplish this?

通过为Tabs创建适当的标记，我已经能够在jQuery UI对话框中放置一个jQuery UI Tabs小部件;但是对Accordion做同样的事情并没有奏效：点击手风琴部分的锚点会导致对话框关闭。有没有直接的方法来实现这一目标？

2 个解决方案

#1

Works fine for me... I posted a demo for you.

适合我工作......我为你发了一个演示。

Maybe you needed to use the "open" option in the dialog function?

也许您需要在对话框功能中使用“打开”选项？

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

Note: For tabs, it's basically the same thing, add the function call inside the open option.

注意：对于制表符，它基本上是相同的，在open选项中添加函数调用。

#2

You can create a div for the dialog, and a div inside that for the accordion.

您可以为对话框创建一个div，并为手风琴创建一个div。

HTML Snippet:

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

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

});

See the fiddle here: http://jsfiddle.net/saylesc/RDwUj/2/

请看这里的小提琴：http：//jsfiddle.net/saylesc/RDwUj/2/

#1