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

我有一个带有多个选项卡的

jqueryui

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

---

（当然，对于一些运行时定制，

JavaScript

/

domhtml

操作，但是使用最初定义的相同的

模板和相同的

HTML表单

元素id）

这不是最佳解决方案，但可能是一种解决方法

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" />

$(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');
    });
});

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

我用纯HTML创建对话框，并使用JQueryUI为其指定一个

对话框

行为

每个按钮都有一个属性，它会告诉我以后在对话框中应该打开哪个选项卡

当用户单击按钮时，我克隆了我的上一个对话框，将其附加到正文中并获得“tab”属性。然后我给它分配了一个

对话框

行为，而不自动打开，并使用一个与

关闭

事件关联的函数将其从DOM中删除（以避免在HTML正文上出现多个对话框）

在打开之前，我为最近创建的对话框中的所有内容指定了一个

选项卡

行为（看起来我正在使用

查找

功能），并使用之前检索到的

选项卡

属性将正确的选项卡设置为活动选项卡

现在，我已经准备好打开所有设置的对话框

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

快乐编码