JQuery вкладки извлечения

Question

ОРИГИНАЛЬНЫЙ ВОПРОС:

Можно ли вынуть ul из div id = "tabs", чтобы вкладки могли отображаться в совершенно другом месте?

http://jsfiddle.net/jQxc5/

РЕДАКТ. 1:

, но когда я пытаюсь это сделать, вкладки перестают работать, например:

http://jsfiddle.net/jQxc5/1/

Answer 1

Вы должны взглянуть на структуру css, созданную с помощью jQuery ui. Посмотрите на вывод первого решения и скопируйте его в новую структуру, он должен связать его с хорошим файлом CSS.

На веб-сайте jQueryui приведенный пример выглядит примерно так: <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">....

Надеюсь, я был чист.

Answer 2

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

Теперь, если вы хотите отделить свой контент от структуры вкладок, вы можете загрузить контент через AJAX . Вы бы сделали что-то вроде этого:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Preloaded</a></li>
        <li><a href="ajax/content1.html">Tab 1</a></li>
        <li><a href="ajax/content2.html">Tab 2</a></li>
    </ul>
    <div id="tabs-1">
        <p>Some data...</p>
    </div>
</div>

Вы заметите, что вторая и третья вкладки (Tab 1 и Tab 2) загружают свое содержимое с совершенно отдельной страницы. Вы можете разместить здесь любой URL со своего сайта, а jQuery UI загрузит его через AJAX. (Вы также можете предварительно загрузить вкладки AJAX или загрузить их, когда пользователь нажимает на вкладку.)

Однако удаление div из структуры вкладок невозможно (и почему ваш второй пример ломается).