将 jQuery UI Accordion 放入 jQuery UI 对话框中

发布于 2024-09-02 23:59:55 字数 118 浏览 6 评论 0原文

通过为选项卡创建适当的标记，我已经能够将 jQuery UI 选项卡小部件放置在 jQuery UI 对话框中；但对手风琴进行同样的操作并不起作用：单击手风琴部分的锚点会导致对话框关闭。有没有一种简单的方法可以实现这一点？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

水波映月 2024-09-09 23:59:55

对我来说效果很好...我为您发布了演示。

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

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

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

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.

回复收藏 0 原文

夕嗳→ 2024-09-09 23:59:55

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

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

HTML Snippet:

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

$('#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/

回复收藏 0 原文

~没有更多了~