jquery tabs extraktion - jquery, jquery-ui, jquery-ui-tabs

ORIGINALE FRAGE:

Ist es möglich, die ul aus der div id = "tabs" herauszunehmen, damit die tabs an einer völlig anderen Stelle angezeigt werden können?

http://jsfiddle.net/jQxc5/

EDIT 1:

aber wenn ich das versuche, funktionieren die Registerkarten nicht mehr, z.

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

Antworten:

Wenn ich deine Frage richtig verstehe, dannSie können nicht das tun, was Sie versuchen, da die jQuery-Benutzeroberflächenbibliothek ein bestimmtes Format für ihre Registerkarten erwartet. Wenn Sie dieses Format aufheben (was Sie in Ihrem zweiten Beispiel getan haben), kann die jQuery-Benutzeroberfläche es nicht verarbeiten.

Wenn Sie nun versuchen, Ihren Inhalt von der Tabulatorstruktur zu trennen, können Sie dies tun Inhalte über AJAX laden. Sie würden so etwas tun:

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

Sie werden feststellen, dass die zweite und dritte Registerkarte (Tab1 und Tab 2) laden ihren Inhalt von einer völlig separaten Seite. Sie können grundsätzlich jede URL Ihrer Website hier eingeben, und die jQuery-Benutzeroberfläche lädt sie über AJAX. (Sie können die AJAX-Registerkarten auch vorladen oder laden, wenn der Benutzer auf die Registerkarte klickt.)

Es ist jedoch nicht möglich, das div aus der Tabulatorstruktur zu entfernen (und warum das zweite Beispiel kaputt geht).

Sie sollten sich die mit jQuery ui erstellte css-Struktur ansehen. Sehen Sie sich die Ausgabe der ersten Lösung an und kopieren Sie sie in Ihre neue Struktur. Diese sollte mit der guten CSS-Datei verknüpft werden.

Auf der jQueryui-Website sieht das angezeigte Beispiel etwa so aus: <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">....

Ich hoffe ich war klar.