Beiträge getaggt mit jqueryUI

Weiter-Button in verschachtelten Tabs

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);
	}
});

jQuery: Tinyscrollbar innerhalb von Tabs

Wenn man das jQuery Plugin Tiny Scrollbar für Inhalte eines Tabs verwendet, dann wird die Höhe des Elements nicht korrekt berechnet und die Funktionalität nicht gesetzt. Eine Erklärung dafür gibt es auf der jQuery Tabs-Seite: der Tab-Inhalt ist versteckt, daher können die Dimensionen nicht berechnet werden.
Man kann den Tiny Scrollbar aber aktivieren, wenn der Tab (vorausgesetzt es ist nicht der erste und sichtbare) sichtbar wird.

$('#tabs').bind('tabsshow', function(event, ui) {
	if (ui.panel.id == "tab1") {
		$('#content1').tinyscrollbar();
	} else if(ui.panel.id == "tab2") {
		$('#content2').tinyscrollbar();
	}
});

Tags: ,

Geschrieben in javascript | Kommentare deaktiviert für jQuery: Tinyscrollbar innerhalb von Tabs