Question

我正在尝试使用jQuery UI创建一个选项卡集，该选项卡包含一些永久选项卡以及一些特殊用途选项卡。临时添加特殊选项卡：当提交它们包含的表单时，将删除选项卡。

我有这个工作除了一件事：删除标签后，如果稍后重新添加它的内容没有显示，我无法弄清楚原因。我把它提炼到this jsFiddle example，代码也转发到下面。

HTML：

<div id="tabs">
    <ul>
        <li><a href="#foo">Foo</a></li>
    </ul>
    <div id="foo">
        <h2>Foo Tab</h2>
    </div>
    <div id="bar" class="transient" style="display: none">
    <h2><button type="button" class="close" style="float: right"><span class="ui-icon ui-icon-closethick">close</span></button>Bar Tab</h2>
    </div>

    <div id="baz" class="transient" style="display: none">
        <h2><button type="button" class="close" style="float: right"><span class="ui-icon ui-icon-closethick">close</span></button>Baz Tab</h2>
    </div>

</div>

<hr>
<button onClick="openTransientTab('bar', 'Bar')">Add Bar Tab</button>
<button onClick="openTransientTab('baz', 'Baz')">Add Baz Tab</button>

JavaScript的：

$('#tabs').find('div.transient').find(".close").live('click', function() {
        var footer_tabs = $('#tabs');
        var tab_id = $(this).closest("div.transient").attr("id");
        var index = footer_tabs.tabs("option", "selected");
        footer_tabs.tabs("select", -1);
        footer_tabs.tabs("remove", index);
});

function openTransientTab(id, title) {
    var footer_tabs = $("#tabs");
    footer_tabs.tabs("select", -1);
    footer_tabs.tabs("select", "#" + id);
    var selected = footer_tabs.tabs("option", "selected");
    if (selected < 0) {
        footer_tabs.tabs("add", "#" + id, title);
        footer_tabs.tabs("select", "#" + id);
    }

    $("#" + id).css("display", "block");
}

$(function() {
        var footer_tabs = $("#tabs");
        footer_tabs.tabs({
                collapsible: true,
                selected: -1
        });
});

Answer 1

当您加载页面时，会创建bar和baz选项卡，但是在它们的样式中，display设置为none，这就是它们最初不可见的原因。在选项卡内部，当你点击X时，它实际上完全删除了bar和baz的div。当您重新单击以在关闭后添加bar或baz选项卡时，它会重新创建div，但您不会在其中放置任何内容。创建选项卡后，添加以下内容。

document.getElementById("bar").innerHtml = whatever you want within it here

在：

<div id="foo" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
<h2>Foo Tab</h2>
</div>
<div id="baz" class="transient" style="display: none">
<h2>
<button class="close" style="float: right" type="button">
<span class="ui-icon ui-icon-closethick">close</span>
</button>
Baz Tab
</h2>
</div>
<div id="bar" class="transient ui-tabs-panel ui-widget-content ui-corner-bottom" style="display: block;">
<h2>
<button class="close" style="float: right" type="button">
<span class="ui-icon ui-icon-closethick">close</span>
</button>
Bar Tab
</h2>
</div>

打开和关闭后

<div id="foo" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
<h2>Foo Tab</h2>
</div>
<div id="bar" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" style="display: block;"></div>
<div id="baz" class="ui-tabs-panel ui-widget-content ui-corner-bottom" style="display: block;"></div>

Answer 2

在Collecter提供关于什么不起作用的关键洞察力之后，我找到了一种更好的方法来保留标签内容以供重用。我将close函数更改为以下内容：

$('#tabs').find('div.transient').find(".close").live('click', function() {
    var footer_tabs = $('#tabs');
    var tab = $(this).closest("div.transient");
    var index = footer_tabs.tabs("option", "selected");
    footer_tabs.tabs("select", -1);
    footer_tabs.tabs("remove", index);
    footer_tabs.append(tab);
});

动态添加的jQuery-ui选项卡的内容只显示一次

2 个答案: