In verschachtelten Tabs, die mit jQuery erstellt wurden, sollte eine Navigation mittels Weiter-Button umgesetzt werden. Für einfache Tabs habe ich einige Beispiele gefunden:
jQuery UI Tabs with Next/Previous oder jQuery Tabs Next Button. Allerdings sind in diesem Fall die Tabs verschachtelt. d.h. innerhalb von Tabs befinden sich wiederum Tabs: Tab A enthält Tabs A1, A2 und A3, Tab B enthält B1, B2 und B3 und C hat keine Subtabs. Wenn man also in A3 angekommen ist, sollte der Weiter-Button zu B1 verweisen. Weiterhin sollte die normale Tab-Navigation (also das Anklicken der Tab-Titel) weiterhin funktionieren. Wenn man also den Tab A2 auswählt, sollte der Weiter-Button immer noch auf A3 springen lassen.
<div id="tab">
<ul>
<li><a href="#tab-a">A</a></li>
<li><a href="#tab-b">B</a></li>
<li><a href="#tab-c">C</a></li>
</ul>
<div id="tab-a">
<ul>
<li><a href="#tab-a1">A1</a></li>
<li><a href="#tab-a2">A2</a></li>
<li><a href="#tab-a3">A3</a></li>
</ul>
<div id="a1">
Inhalt A1
</div>
<div id="a2">
Inhalt A2
</div>
<div id="a3">
Inhalt A3
</div>
</div>
<div id="tab-b">
<ul>
<li><a href="#tab-b1">B1</a></li>
<li><a href="#tab-b2">B2</a></li>
<li><a href="#tab-b3">B3</a></li>
</ul>
</div>
[... usw]
</div>
Ich habe einen Button implementiert, der sich außerhalb der Tabs befindet. Damit eine Navigation möglich ist, müssen die Tab-Objekte gespeichert werden:
var $firstLevel = $('#tabs').tabs();
var counter = 0;
$('#tabs .tabbed').each( function(index, elem) {
var cid = $(elem).parent().attr('id');
tabObjects[counter] = $(elem).tabs();
counter++;
});
Wenn der Weiter-Button geklickt wird, wird ermittelt, welcher Tab der ersten Ebene gerade aktiv ist. Falls es Tabs der zweiten Ebene gibt, wird ermittelt, welcher von denen gerade aktiv ist. Dann wird geprüft, ob auf den Tab der zweiten Ebene Geschwister-Elemente folgen. Wenn ja, dann wird der nächste aktiviert. Wenn nicht, dann wird der nächste Tab der ersten Ebene aktiviert.
$('#next-button a').click( function() {
var selected = $firstLevel.tabs('option', 'selected');
var tabId = $('#tabs > div').eq(selected).attr('id');
$subTab = tabObjects[selected];
var length = $firstLevel.tabs('length');
if($subTab != undefined) {
var subSelected = $subTab.tabs('option', 'selected');
var subLength = $subTab.tabs('length');
if(subSelected + 1 < subLength) {
/*
* switch to next tab
*/
$subTab.tabs('select', subSelected + 1);
} else if(selected + 1 < length) {
/*
* switch no next parent tab
*/
$firstLevel.tabs('select', selected + 1);
if(length == selected + 2) {
$(this).hide();
}
$subTab = tabObjects[selected + 1];
if($subTab != undefined) {
$subTab.tabs('select', 0);
}
}
} else {
$firstLevel.tabs('select', selected + 1);
}
});
Neueste Kommentare