如何添加導航下使用jQuery UI選項卡的選項卡式內容？

Question

我使用jQuery UI選項卡與正在使用的默認功能窗格的標籤式界面。我想添加額外的導航，它出現在.ui-tabs DIV之外，這些導航只是包含在無序列表中的按鈕（除了最上面的標籤鏈接外）。

誰能告訴我如何做到這一點？

Answer 1

您可以使用標籤API中的select方法做到這一點。

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/