在 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 - 动态添加新标签时，你只需要做这样的事情:

HTML:

<ul><li><a href='#tab1'>#1</a></li><div id='tab1'></div>
<button id='add-tab'>添加标签</button>

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

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

<块引用>

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

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

所以我假设要么是我做错了，要么是升级指南不完整.请澄清.

有趣的是，在删除选项卡时，升级指南说您必须从导航面板和选项卡面板中明确删除列表项，所以我想知道添加选项卡是否同样适用.

解决方案

指南一定不完整，需要添加tab面板

$(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("刷新");});});

示例

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:

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

example

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