web-dev-qa-db-ja.com

jquery-ui 1.9では、新しいタブを動的にどのように作成しますか？

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タブ：フラグメント識別子が一致しません。

私が正しく理解している場合、このエラーは実際のタブパネルが作成されていないことを意味します（したがって、ナビゲーションパネルとタブパネルの間に不一致があります）。ただし、アップグレードガイドでは、タブパネルの作成については触れていません。

だから私は間違っているか、アップグレードガイドが不完全であると仮定しています。どうか明らかにしてください。

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

jquery-uitabs
17
Kosta Kontos

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

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

例

34
user2985029

各タブを追加した後、tab number 2

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

フィドルを確認してください http://jsfiddle.net/AJDLt/1/

4
Rohan Kumar

したがって、これを行うための正しい方法はトップアンサーのようですが、nub_tabsはありません。

$("div#tabs").tabs();
var tab_id = 1;
$("button#add-tab").click(function() {
    tab_id++; //It can be any id;

    $("div#tabs ul").append(
    '<li id="'+tab_id+'"><a href="#tab"'+tab_id+'">#"+tab_id+"</a><i class="close-tab" target="'+tab_id+'"></i></li>');
$("div#tabs").append(
    '<div id="'+tab_id+'">#'+tab_id+'</div>');
    $("div#tabs").tabs("refresh");
});

//Now i want to show some functions from my code;
//It will not work for you, just want show the idea;

//No clone tabs

function if_tab_exist(thisI) { //thisI - contains some id, title and text for tab content.
    var tab_id = $(thisI).attr('id');
    if(!$('.ui-tabs-nav li#'+tab_id).is('*')) {
        addTab(thisI); //Add tab function
    } else {
        var TAB_index = $('.ui-tabs-nav li#'+tab_id).index();
        $("#tabs").tabs({active: TAB_index}); //Will activate already exist tab
    }
}

//Close tab
function close_tab(tab_id) {
    $('.ui-tabs-nav i[target='+tab_id+']').parent().remove();       
    $('#tabs div#'+tab_id+']').remove();
    $("#tabs").tabs("refresh");
}
//Events
//CLose
$("body").on('click','.ui-tabs-nav .ui-state-default i', function() {
    close_tab($(this).attr('target'));
});
//Add
$("body").on('click','.addTab', function() {
    if_tab_exist(this);
});
4
fdrv

タブ_"add"_が削除されたことは不愉快ですが、jQueryの拡張は非常に簡単です。独自のaddTabメソッドを追加するだけです。

例えばこのようなもの：

_// jQuery extension method
$.fn.addTab = function (name) {
    $('ul', this).append('<li><a href="#tab-' + name + '">' + name + '</a></li>');
    $(this).append("<div id='tab-" + name + "'></div>");
    $(this).tabs("refresh");
};
_

そして単に次のように使用します：

_$('#tabs').addTab("NewTab");
$('#tabs').addTab("Another NewTab");
$('#tabs').addTab("etc");
_

JSFiddle：http://jsfiddle.net/TrueBlueAussie/AJDLt/315/

@Andyで提案されているように、インターフェースでタブをネストする場合は、.first()を使用する必要があります。

例えばこのようなもの：

_// jQuery extension method
$.fn.addTab = function (name) {
    $('ul', this).first().append('<li><a href="#tab-' + name + '">' + name + '</a></li>');
    $(this).append("<div id='tab-" + name + "'></div>");
    $(this).tabs("refresh");
};
_
3
Gone Coding

例はより詳細に説明されています ここ さらに 実行可能なバージョン がありますソースコードを含む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");
1
Muhammad Soliman