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

Question

Возможно ли и если да, как бы вы инициализировали содержимое с вкладками вне элемента контейнера вкладок?

Вся документация включает вкладки и содержимое вкладок в одном и том же контейнере, например:

<div id="tabs">
    <ul>
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
    </ul>
    <div id="tab1">
        Tab 1 content
    </div>
    <div id="tab2">
        Tab 2 content
    </div>
    <div id="tab3">
        Tab 3 content
    </div>
</div>

Однако для проекта, над которым я работаю, навигация и содержимое вкладки не находятся в одном и том же контейнере, поэтому:

<nav id="tabs">
    <ul>
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
    </ul>
</nav>
...
<article>
    <section id="tab1">
        Section 1 content
    </section>
    <section id="tab2">
        Section 2 content
    </section>
    <section id="tab3">
        Section 3 content
    </section>
</article>

Answer 1

Глядя на исходный код tabs (строки 228 и 233 ), кажется невозможным сделать это без какого-либо "хака" как клонирование навигации, как предлагает Уильям Ниу, или размещение навигации и панелей внутри общего контейнера и т. д. Текущая итерация tabs ищет панели вкладок внутри родительского элемента; то есть он использует find().

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

Обновление: Теперь есть официальный способ сделать это: http://bugs.jqueryui.com/ticket/7715

Answer 2

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

$('#tabs').tabs();

// clone the navigation bar and put it in the placeholder
var copy = $('#tabs').clone(true).attr('id', 'placeholder');
copy.find('div.ui-tabs-panel').remove();
$('#placeholder').replaceWith(copy);

// remove the original navigation bar
$('#tabs > ul').remove();

$('#placeholder li > a').click(function() {
    $(this).parent().siblings().removeClass('ui-tabs-selected ui-state-active');
});

Смотрите это в действии: http://jsfiddle.net/william/QAJ2Z/1/.

Answer 3

Я не знаю, сработает ли это для вас, но одним из решений будет доступ к элементу, который содержит оба.

например

$( "#tabs").parent().tabs();

Проверьте это скрипка