Как добавить навигацию под вкладками с помощью вкладок пользовательского интерфейса jQuery?

Question

Я использую вкладки пользовательского интерфейса jQuery для интерфейса с вкладками с панелями, использующими функциональность по умолчанию. Я хотел бы добавить дополнительную навигацию, которая появляется вне DIV-вкладки .ui, это просто кнопки, содержащиеся в неупорядоченном списке (в дополнение к ссылкам с вкладками в самом верху).

Может кто-нибудь сказать мне, как это сделать?

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/