javascript - jQuery UIタブを使用してタブ付きコンテンツの下にナビゲーションを追加するにはどうすればよいですか？

Question

デフォルトの機能を使用しているペインを持つタブ付きインターフェイスにjQueryUIタブを使用しています。.ui-tabs DIVの外側に表示されるナビゲーションを追加したいと思います。これは、順序付けされていないリスト内に含まれるボタンです（最上部のタブ付きリンクに加えて）。

誰かがこれを達成する方法を教えてもらえますか？

Answer 1

selectタブ APIの メソッドを使用してこれを行うことができます。

1. ボタンの順序付けられていないリストを追加します。dataボタンをタブに関連付けるために属性を使用しています。

   <ul>
       <li><button type="button" class="tabs-link" data-tab="#tabs-1">Nunc tincidunt</button></li>
       <li><button type="button" class="tabs-link" data-tab="#tabs-2">Proin dolor</button></li>
       <li><button type="button" class="tabs-link" data-tab="#tabs-3">Aenean lacinia</button></li>
   </ul>
   

2. clickこれらのボタンにイベント ハンドラーをバインドします。

   $("button.tabs-link").bind("click", function($event) {
       $event.preventDefault();
       $("#tabs").tabs("select", $(this).data("tab"));
   });
   

これが実際の例です: http://jsfiddle.net/5ZnYC/