2

我有一个jQuery UI带有多个选项卡的对话框，有时，我需要将其中一个选项卡作为单独的对话框弹出（在选项卡式初始对话框的顶部），那么，我可以通过重新使用同一个对话框来实现这一点吗？

（当然有一点运行时定制，JavaScript/DOM HTML操作，但<div></div>最初定义的模板和HTML FORM元素 ID 相同）

4

1 回答 1

0

这不是最佳解决方案，但可能是您应该做什么的一种方法。

HTML：

<div id="dialog" title="Basic dialog">
    <div class="dtabs">
        <ul>
            <li><a href="#tab1">First</a>

            </li>
            <li><a href="#tab2">Second</a>

            </li>
            <li><a href="#tab3">Third</a>

            </li>
        </ul>
        <div id="tab1">
            <p>First!</p>
        </div>
        <div id="tab2">
            <p>Second!</p>
        </div>
        <div id="tab3">
            <p>Third!</p>
        </div>
    </div>
</div>
<input value="Tab 1 on Dialog" type="button" alt="1" />
<input value="Tab 2 on Dialog" type="button" alt="2" />
<input value="Tab 3 on Dialog" type="button" alt="3" />

Javascript：

$(function () {
    // Dialog without autoOpen just to hide it from viewport
    $('#dialog').dialog({
        autoOpen: false
    });
    $('input').click(function () {
        // Clone the dialog and append it to body
        // Get "tab" number to know which tab should I set as active later
        var d = $('#dialog').clone().appendTo('body'),
            tab = $(this).attr('alt')-1;
        // Assign "dialog" behaviour and remove it when I close it
        d.dialog({
            autoOpen: false,
            close: function (e, ui) {
                $(this).dialog('destroy').remove();
            }
        });
        // Tabs inside my dialog has "tabs" behaviour by JQueryUI
        d.find('.dtabs').tabs({
            active: tab
        });
        // Open up!
        d.dialog('open');
    });
});

http://jsfiddle.net/franverona/k7cuH/

让我解释一下我做了什么：

  1. 我用纯 HTML 创建我的对话框，并使用 JQueryUI 为其分配一个dialog行为。
  2. 每个按钮都有一个属性，稍后会告诉我应该在以后的对话框中打开哪个选项卡。
  3. 当用户单击按钮时，我会克隆我以前的对话框，将其附加到正文并获取“选项卡”属性。然后我为它分配一个dialog不带 autoOpen 的行为，并使用与事件关联的函数close将其从 DOM 中删除（以避免在我的 HTML 正文上出现多个对话框）。
  4. 在打开之前，我为我最近创建的对话框中的所有内容分配了一个tabs行为（看起来我正在使用函数），并使用之前检索到的属性find将正确的选项卡设置为活动选项卡。tab
  5. 现在我准备好打开所有设置的对话框。

我再说一遍：这不是最佳解决方案，但应该作为以后开发迭代的原型。

快乐编码！

于 2014-01-24T21:56:29.977 回答