jQuery UI 1.8 には、ウィジェットのタブを動的に削除または追加する目的に役立つ add
andメソッド (および関連するイベント) がありました。remove
の従来の 1.8 ドキュメントからtabs
:
add( url, label [, index ] )
タブを追加します。
remove( index )
タブを削除します。
2 つの方法では、次のオプションを使用しました。
panelTemplate タイプ: 文字列
デフォルト: ""
add() メソッドでタブを追加する場合、またはその場でリモート タブのパネルを作成する場合に、新しいタブ パネルが作成される HTML テンプレート。
tabTemplate タイプ: 文字列
[ドキュメントを参照]
タイプ : 文字列
[ドキュメントを参照]
ご覧のとおり、メソッドpanelTemplate
を使用してパネルが作成される HTML テンプレートです。add
これはすべて非推奨になりました - タブを動的に追加または削除する現在の方法は、新しいrefresh
方法の支援を受けています。
リフレッシュ()
DOM で直接追加または削除されたタブを処理し、タブ パネルの高さを再計算します。結果は、コンテンツと heightStyle オプションによって異なります。
このメソッドは引数を受け入れません。
アップグレード ガイドに記載されているように、スクリプト内のすべてadd
のremove
メソッド呼び出しを削除し、それらを DOM を直接操作するコードに置き換えてから、refresh()
. さらに、 、、および
の設定オプションを破棄する必要があります。idPrefix
tabTemplate
panelTemplate
コードが示唆するように、どこかでadd
メソッドを使用しています。たとえば、次のようになります。
$("#main-xxx-tabs").tabs("add", "/remote/tab.html", "New Tab");
新しいAPI では、(現在の値tabs
を考慮して) 次のようなことを行う必要があります。panelTemplate
/* Add tab */
$("#main-xxx-tabs .ui-tabs-nav")
.append("<li aria-controls='newTabID1'><a href='/remote/tab.html'>New Tab</a></li>")
/* Add respective tab panel (content) and refresh widget */
$("#main-xxx-tabs")
.append("<div id="newTabID1" class='main-xxx-tabs-content'>New Tab Content</div>");
.tabs("refresh");
これにより、新しいタブが作成されます。リモート読み込み (ajax) タブが必要ない場合は、値を\href
と同じに置き換えることができます。aria-controls
id
最後に、アップグレード ガイドには、新しい API を使用してタブを削除する方法の例も示されています。
編集:
panelTemplate
動的に作成するのではなく、プライマリ (最初の) タブのテンプレートとして使用するだけの場合は、同じ規則が適用されます。適切な html を直接追加する必要があります。アップグレード前の html が次の場合:
<div id="main-xxx-tabs">
<ul>
<li><a href="link1.php">link1</a></li>
<li><a href="link2.php">link2</a></li>
</ul>
</div>
次に、次の行に沿って何かを行う必要があります。
<div id="main-xxx-tabs">
<ul>
<li><a href="#tabs-1">Preloaded</a></li>
<li><a href="link1.php">link1</a></li>
<li><a href="link2.php">link2</a></li>
</ul>
<!-- vv Constructed from your original panelTemplate vv -->
<div id="tabs-1" class="main-xxx-tabs-content">
<p>Your preloaded content here.</p>
</div>
</div>
さらに明確にするために、 apanel
はタブのコンテンツ div です。
ajax でロードされたタブの場合、パネルを作成する必要はありません。パネルは自動的に作成されます。
事実上、物事をやり直すには、panelTemplate
オプションを削除するだけです。
ajax が読み込まれたタブとプリロードされたタブを示す JSFiddle を次に示します。
http://jsfiddle.net/losnir/LWmVv/ jQuery UI タブ
のドキュメント も参照してください。