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 回答