1

そこで、jquery ui を 1.8 から 1.10 にアップグレードしました。これによると、タブはすでに 1.9 でリファクタリングされているようです: http://jqueryui.com/upgrade-guide/1.9

読んでいる間-これが出てきました：

非推奨の idPrefix、tabTemplate、および panelTemplate オプション。リフレッシュ方法を使う

前述のとおり、add メソッドと remove メソッドは廃止されました。その結果、idPrefix、tabTemplate、および panelTemplate オプションも非推奨になりました。idPrefix、tabTemplate、および panelTemplate オプションのすべての使用を、使用したいマークアップに置き換える必要があります。

You should replace all uses... with the markup you would like to use意味がよくわかりません。

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>

JS

jQuery("#main-xxx-tabs").tabs({
  panelTemplate: "<div class='main-xxx-tabs-content'></div>"
})

これを適切にアップグレードする方法の例を誰かが提供できれば、大歓迎です。

4

1 に答える 1

0

jQuery UI 1.8 には、ウィジェットのタブを動的に削除または追加する目的に役立つ addandメソッド (および関連するイベント) がありました。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(). さらに、 、、および
の設定オプションを破棄する必要があります。idPrefixtabTemplatepanelTemplate

コードが示唆するように、どこかで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-controlsid

最後に、アップグレード ガイドには、新しい 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 タブ
のドキュメント も参照してください。

于 2013-08-15T21:36:25.533 に答える