TheGeek.de

Wer kennt es nicht: Mehrere Datentabellen oder -abschnitte auf einer Seite und der Benutzer verliert schnell den Überblick. Die Lösung: Ein wenig JavaScript, mit ein wenig CSS und ein paar DIVs garniert, das ganze kräftig durchkneten und fertig ist der Tabbed-Content für jeden Einsatzzweck.

Hier ein wenig HTML:

	
Datenblatt 1
	
Datenblatt 2
	
Datenblatt 3
	
Datenblatt 4
	
Datenblatt 5

Jede Menge Daten (1)
Jede Menge Daten (2)
Jede Menge Daten (3)
Jede Menge Daten (4)
Jede Menge Daten (5)

Oben findet sich unser Tab-Menü, dass die insgesamt 5 Daten-Layer per Klick einblenden soll. Die DIVs mit den Daten sind per Style-Definition erstmal nicht sichtbar, bis auf den ersten DIV, da davon auszugehen ist, dass ohne einen Klick auf etwas das erste Datenblatt angezeigt werden soll. Damit das Tab-Menü auch ansprechend aussieht, brauchen wir noch folgende CSS Definitionen:

#tabmenu {
	overflow:hidden;
	border-bottom:1px solid #FFF;
}
#tabmenu .tab {
	float:left;
	border:1px solid #660000;
	border-bottom:none;
	margin-left:3px;
	padding:3px;
	background-color:#F4F4F4;
	font-weight:bold;
}
#tabmenu .active {
	background-color:#FFFFFF;
	color:#000099;
}
#tabmenu .tab:hover {
	background-color:#FFFFFF;
	cursor:pointer;
}

Damit wir nun nicht für jeden einzelnen Tab eine “onclick” Aktion schreiben müssen, habe ich mir überlegt ein auf Prototype aufsetzendes JavaScript zu schreiben, dass anhand der verwendeten IDs der Tabs und der Daten-DIVs (die nur zueinander passen müssen) eine generell einsetzbare Lösung schafft. Das Skript kann im Head-Bereich der Seite eingebunden werden und durchsucht beim Aufruf, ob Tabs vorhanden sind und behandelt diese entsprechend.

/**
 * Render a tabbed menu
 */
var tabids = [];
var containerids = [];
function create_tabs()
{
	$$('.tab').all( function( el ) {
			tabids.push( el.id );
			containerids.push( el.id.replace( 'tab_', '' ) );
			el.observe( 'click', handle_tab_click );
			return true;
	} );
}
/**
 * Hande a clicked tab
 */
function handle_tab_click( event )
{
	// Get container id
	containerid = this.id.replace( 'tab_', '' );
	// Set active tab menu point
	tabids.all( function( tab ) {
		$(tab).removeClassName( 'active' );
		return true;
	} );
	this.addClassName( 'active' );
	// Set active tab content container
	containerids.all( function( container ) {
		$(container).hide();
		return true;
	} );
	$(containerid).show();
}
/**
 * Init tabbing
 */
Event.observe( window, 'load', create_tabs );

Die erste Funktion “create_tabs” sucht alle DIV-Layer innerhalb der Seite, die mit der CSS-Klasse “tab” versehen sind. Die gefundenen Tabs werden danach zur weiteren Verarbeitung in einem Array gespeichert und mit einer String-Ersetzung der zugehörige Daten-Layer ermittelt. Die IDs der Datenlayer werden ebenfalls in einem Array gespeichert. Zu guter letzt wird dem Tab-Menüpunkt noch eine Handler-Funktion zugewiesen.

Die zweite Funktion ist diese Handler-Funktion. Beim Klick wird zuerst ermittelt, welcher Daten-Layer angezeigt werden soll, indem durch eine Zeichenersetzung das “tab_” in der ID des Tab-Menüpunkts entfernt wird. Übrig bleibt dann z.B. “datasheet1″, wenn der erste Menüpunkt ausgewählt wurde. So weiß die Funktion für den späteren Verlauf, welcher DIV angezeigt werden muss.

Nun geht es daran, das Tab-Menü entsprechend zu verändern, denn es soll ja der angeklickte Menüpunkt hervorgehoben werden. Dazu entfernen wir per Prototype-Methode “all”, die auf das bei der Initialisierung erstellte Array angewendet wird, bei allen Tabs die CSS Klasse “active”. Danach wir die Klasse “active” dann beim angeklickten Punkt gesetzt und das Menü ändert sich so entsprechend dem Nutzerverhalten.

Dann durchlaufen wir ebenfalls mit “all” das Array, das die IDs der Datenblätter enthält und verstecken mittels “hide” alle DIVs. Nun wird nur noch das richtige DIV eingeblendet und das Tabbing ist komplett.

Großes Finale im Skript ist dann noch ein Event-Observer, der nach dem Laden der Seite die Funktion “create_tabs” aufruft und so alle auf der Seite gefundenen Tabs initialisiert.

Wichtig für den Einsatz des Skripts ist nur folgendes: Die IDs der Tab-Menüpunkt und der Layer mit den Daten müssen auf einander abgestimmt sein und ein Tab-Menüpunkt muss immer mit “tab_” beginnen. Lege ich also einen Tab mit der ID “tab_datentabelle123″ an, dann muss das DIV mit den Daten die ID “datentabelle123″ haben, sonst funktioniert es nicht. Natürlich müssen die Tab-Menüpunkte auch die richtigen CSS-Klassen haben, aber das versteht sich wohl von selbst.

Und so könnte es aussehen:

(529x gelesen)

Verkürzter Link: http://wp.me/pGiiJ-5V