19

jquery-ui 1.9 タブのアップグレード ガイドによると - http://jqueryui.com/upgrade-guide/1.9/#deprecated-add-and-remove-methods-and-events-use-refresh-method - 新規追加時タブを動的に変更するには、次のようにするだけです。

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

ただし、新しく作成したタブ間で変更を試みると、firebug で次のエラーが発生します。

jQuery UI タブ: フラグメント識別子の不一致。

私の理解が正しければ、このエラーは、実際のタブ パネルが作成されていないことを意味します (したがって、ナビゲーション パネルとタブ パネルの間に不一致があります)。しかし、アップグレード ガイドには、タブ パネルの作成については言及されていません。

そのため、私のやり方が間違っているか、アップグレード ガイドが不完全であると想定しています。どうか明らかにしてください。

興味深いことに、タブを削除する場合、アップグレード ガイドには、ナビゲーション パネルからリスト項目とタブ パネルの両方を明示的に削除する必要があると記載されているため、タブの追加にも同じことが当てはまるかどうか疑問に思っています。

4

5 に答える 5

38

ガイドは不完全でなければなりません。タブ パネルを追加する必要があります

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

例

于 2013-02-05T08:09:50.220 に答える
4

タブを追加するたびに、作成などのコンテンツを表示するための div を作成する必要がありますtab number 2

$("div#tabs").append("<div id='tab"+num_tabs+"'></div>");

フィドルをチェックhttp://jsfiddle.net/AJDLt/1/

于 2013-02-05T08:08:56.047 に答える
1

例については、こちらで詳しく説明しています。さらに、実行可能なバージョンがソース コードと共に jquery ui の公式サイトにあります。

簡単な宣言は次のようになります。

var addTab = function (tabs, tabId, tabLabel, tabContentHtml) {
     var header = "<li><a href='#" + tabId + "'>" + tabLabel + "</a> </li>"
     tabs.find(".ui-tabs-nav").append(header);
     tabs.append("<div id='" + tabId + "'><p>" + tabContentHtml + "</p></div>");
     tabs.tabs("refresh");
};

次のように入力するだけで、新しいタブの追加が簡単になりました。

$("#tabs_area").tabs();
addTab($("#tabs_area"), "tab_id1", "Tab 1", "this is just test");
于 2014-11-18T20:09:51.863 に答える