代码之家 › 专栏 › 技术社区 › Tim

将jquery用户界面对应项放入jquery用户界面对话框

jquery-ui-accordion jquery-ui-dialog jquery

Tim · 技术社区 · 15 年前

通过为选项卡创建适当的标记,我已经能够将jquery ui tabs小部件放在jquery ui对话框中;但是使用Accordion进行相同操作没有奏效:单击Accordion部分的锚会导致对话框关闭。有没有一个简单的方法来完成这一点?

2 回复 | 直到 11 年前

Mottie 15 年前

对我来说很好…我张贴 a demo 为你。

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

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

注意:对于选项卡,基本上是一样的,在open选项中添加函数调用。

Corndog 11 年前

您可以为对话框创建一个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();

});