在jquery-ui 1.9中，如何动态创建新标签页? [英] In jquery-ui 1.9, how do you create new tabs dynamically?

问题描述

根据jquery-ui 1.9选项卡的升级指南-

According to the upgrade guide for jquery-ui 1.9 tabs - http://jqueryui.com/upgrade-guide/1.9/#deprecated-add-and-remove-methods-and-events-use-refresh-method - when adding new tabs dynamically, you only have to do something like this:

HTML:

<div id='tabs'>
    <ul>
        <li><a href='#tab1'>#1</a></li>
    </ul>
    <div id='tab1'></div>
</div>
<button id='add-tab'>Add tab</button>

JavaScript:

JavaScript:

$(document).ready(function() {
    $("div#tabs").tabs();

    $("button#add-tab").click(function() {

        var num_tabs = $("div#tabs ul li").length + 1;

        $("div#tabs ul").append(
            "<li><a href='#tab" + num_tabs + "'>#" + num_tabs + "</a></li>"
        );

        $("div#tabs").tabs("refresh");
    });                    
});

但是，当我尝试在新创建的选项卡之间进行更改时，在萤火虫中出现以下错误:

However when I try change between the newly created tabs, I get the following error in firebug:

jQuery UI标签:片段标识符不匹配.

jQuery UI Tabs: Mismatching fragment identifier.

如果我理解正确，那么该错误意味着未创建实际的选项卡面板(因此，导航面板和选项卡面板之间存在不匹配).但是升级指南没有提到创建选项卡面板.

If I understand correctly, this error means that the actual tab panel isn't being created (and thus there's a mismatch between the nav panel and the tab panel). But the upgrade guide makes no mention of creating a tab panel.

因此，我假设我做错了或升级指南不完整.请澄清.

So I'm assuming that either I'm doing it wrong or that the upgrade guide is incomplete. Please clarify.

有趣的是，升级指南说，当删除标签时，您必须显式地从导航面板和标签面板中同时删除列表项，所以我想知道是否同样适用于添加标签.

Interestingly enough, when removing tabs, the upgrade guide says you have to explicitly remove both the list item from the nav panel as well as the tab panel explicitly, so I'm wondering if the same applies to adding tabs.

推荐答案

指南必须不完整，您需要添加标签面板

The guide must be incomplete, you need to add a tab panel

$(document).ready(function() {
    $("div#tabs").tabs();

    $("button#add-tab").click(function() {

        var num_tabs = $("div#tabs ul li").length + 1;

        $("div#tabs ul").append(
            "<li><a href='#tab" + num_tabs + "'>#" + num_tabs + "</a></li>"
        );
$("div#tabs").append(
            "<div id='tab" + num_tabs + "'>#" + num_tabs + "</div>"
        );
        $("div#tabs").tabs("refresh");
    });                    
});

示例

这篇关于在jquery-ui 1.9中，如何动态创建新标签页?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！