Отделение вкладок от контейнера в пользовательском интерфейсе jQuery

Question

У меня есть страница с макетом из трех столбцов (главная навигационная панель слева, центральная консоль посередине и специальные параметры страницы / навигация справа).До сих пор я использовал виджет «Вкладки» в пользовательском интерфейсе jQuery в области центральной консоли для одной из своих страниц.

Я хотел бы разделить вкладки (поместить их в правый столбец), сохраняя при этомСодержание содержимого в середине.Например:

<div id="center_console">
    <div class="tabs_container" id="pets"></div>
    <div class="tabs_container" id="family"></div>
    <div class="tabs_container" id="bio"></div>
</div>
<div id="right_options">
    <div id="tabs">
       <ul>
            <li>Pets</li>
            <li>Family</li>
            <li>Bio</li>
       </ul>
     </div>
</div>

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

Answer 1

Я думаю, что вам нужно использовать метод "select"

Таким образом, вы привязали бы свои ссылки к вкладке, на которую хотите нажать

<div id="center_console">
    <div class="tabs_container" id="pets"></div>
    <div class="tabs_container" id="family"></div>
    <div class="tabs_container" id="bio"></div>
</div>
<div id="right_options">
<div id="tabs">
   <ul>
        <li id="pets">Pets</li>
        <li id="family">Family</li>
        <li id="bio">Bio</li>
   </ul>
 </div>
</div>
$(function(){
//set-up your tabs as normal first

     $('#bio').click(function(){
        $('#center_console').tabs("select", '#bio');
     });
});

Возможно, вам понадобитсянекоторые ссылки также устанавливаются в виде вкладок в center_console, но вы можете использовать CSS, чтобы скрыть их.Я не уверен на 100% в том, как tabs () работает под капотом.Мне удалось заставить это работать, взломав демонстрацию jqueryui с помощью firebug, но по какой-то причине я не смог заставить работать вкладки в jsfiddle.Если вы можете настроить пример так, чтобы я был рад отредактировать его, чтобы показать вам, что я сделал

Благодаря полезному комментарию, приведенному ниже, я понял, что не следую здесь передовой практике.Я настроил скрипку, которая должна достигать того, что вы хотите (все, что вам нужно, это нужно будет правильно оформить).Его можно найти здесь http://jsfiddle.net/GKNC9/1/

спасибо