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/

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

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

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

快乐的编码！

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

1 个答案: