wyodrębnianie kart jQuery - jquery, jquery-ui, jquery-ui-tabs

ORYGINALNE PYTANIE:

Czy można wyjąć ul z div id = "tabs", aby zakładki mogły być wyświetlane w zupełnie innej lokalizacji?

http://jsfiddle.net/jQxc5/

EDYCJA 1:

ale gdy próbuję to zrobić, zakładki przestają działać np:

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

Odpowiedzi:

Jeśli dobrze rozumiem twoje pytanie, tynie może zrobić tego, co próbujesz zrobić, ponieważ biblioteka jQuery UI oczekuje określonego formatu dla jego kart i kiedy przełamujesz ten format (który zrobiłeś w twoim drugim przykładzie), jQuery UI nie jest w stanie go przetworzyć.

Teraz, jeśli chcesz oddzielić swoje treści od struktury kart, możesz ładuj zawartość za pośrednictwem AJAX. Zrobilibyśmy coś takiego:

<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>

Zauważysz, że druga i trzecia zakładka (tab1 i Tab 2) ładują swoją zawartość z całkowicie oddzielnej strony. Zasadniczo możesz umieścić tutaj dowolny URL z Twojej strony, a jQuery UI załaduje go za pośrednictwem AJAX. (Możesz także wstępnie załadować karty AJAX lub załadować je, gdy użytkownik kliknie kartę).

Jednak usunięcie elementu div ze struktury tabulacji nie jest możliwe (i dlaczego drugi przykład się zepsuje).

Powinieneś spojrzeć na strukturę css, która jest tworzona za pomocą jQuery ui. Popatrz na wynik pierwszego rozwiązania i skopiuj go do nowej struktury, powinieneś połączyć go z dobrym plikiem css.

Na stronie jQueryui pokazany przykład wygląda następująco: <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">....

Mam nadzieję, że było jasne.