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

问题描述

根据 jquery-ui 1.9 选项卡的升级指南 - http://jqueryui.com/upgrade-guide/1.9/#deprecated-add-and-remove-methods-and-events-use-refresh-method - 动态添加新标签时，你只需要这样做:

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");
    });                    
});

但是，当我尝试在新创建的选项卡之间进行更改时，我在 firebug 中收到以下错误:

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屋！