jQuery UI タブ サンプル

jQuery UI の タブの追加、削除、タブへコンテンツの読み込みをやってみました。

下のボタン：
「単純なタブの追加」で単純なタブの追加
「コンテンツ読み込み」で sample.htmlをタブ内に表示
「現在のタブを閉じる」でアクティブなタブを閉じる

コード

$(function() {
    $("input:submit, a, button", ".toolbar").button();

    $("#tabs").tabs();
    var tabCount = 2;
    var tabNavTmpl1 = "<li><a href=\"#tabs-{0}\">{1}番目のタブ</a></li>";
    var tabNavTmpl2 = "<li><a href=\"sample.html\">コンテンツ #{0}</a></li>";
    var tabHtmlTmpl = "<div id=\"tabs-{0}\"><p>{1}番目のタブです。</p></div>";
    
    // 「単純なタブの追加」ボタンのクリック処理
    // URL にタブIDを指定する #tab-N
    // ※ N は連番
    $("#add").click(function() {
        ++tabCount;
        var tabNav = tabNavTmpl1.replace("{0}", tabCount).replace("{1}", tabCount);
        var tabHtml = tabHtmlTmpl.replace("{0}", tabCount).replace("{1}", tabCount);
        $("#tabs").find( ".ui-tabs-nav" ).append(tabNav);
        $("#tabs").append(tabHtml);
        $("#tabs").tabs("refresh");
        
        if (tabCount == 1) {
            $("#tabs").tabs("option", "active", 0); // １番目のタブをアクティブにする
            $("#tabs").tabs("refresh");
        }
    });

    // 「コンテンツ読み込み」ボタンのクリック処理
    // URL にページを指定する
    $("#load").click(function() {
        ++tabCount;
        var tabNav = tabNavTmpl2.replace("{0}", tabCount);
        $("#tabs").find( ".ui-tabs-nav" ).append(tabNav);
        $("#tabs").tabs("refresh");
    });

    // 「現在のタブを閉じる」ボタンのクリック処理
    $("#close").click(function() {
        var doClose = true;
        if (tabCount == 1) {
            doClose = window.confirm("最後のタブです。本当に閉じますか？");
        }
        if (doClose) {
            var panelId = $("#tabs").find(".ui-tabs-active").remove().attr("aria-controls");
            $("#" + panelId).remove();
            $("#tabs").tabs("refresh");
            --tabCount;
        }
    });
});
	

HTMLコード

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">最初のタブ</a></li>
        <li><a href="sample.html">コンテンツ</a></li>
    </ul>

    <div id="tabs-1">
        <p>最初のタブです。</p>
    </div> <!-- end of tabs-1 -->

</div> <!-- end of tabs -->
<br/>
<div class="toolbar">
    <button id="add">単純なタブの追加</button>
    <button id="load">コンテンツ読み込み</button>
    <button id="close">現在のタブを閉じる</button>
</div>