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); // 1番目のタブをアクティブにする
$("#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>