调用同一个 jQuery UI 对话框的多个实例

Question

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

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

Answer 1

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

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

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

编码愉快！