4. August 2010

jQuery idTabs bei Seitenwechsel speichern

4. August 2010 - Geschrieben von Martin - 2 Kommentare

In letzter Zeit beschäftige ich mich wieder verstärkt mit JavaScript, bzw. jQuery. Heute habe ich auf Basis von idTabs (@BissyDesign – Danke für den Tipp ;-)) ein Horizontales Menü beflügelt, dessen Untermenüpunkte nun bei klick auf einen Obermenüpunkt ohne Seitenreload wechseln. Lange Rede kurzer Sinn:

und so sieht es nach dem klick auf „Nachrichten“ aus:

Leider hat die Sache mit idTabs einen Haken, und zwar springt das Menü nach einem Seitenreload wieder zum ersten Tab zurück und bleibt nicht beim gewählten. Doch dafür habe ich eine ganz einfache Lösung gefunden.

Als erstes müssen wir das jQuery Cookie Plugin einbinden: http://plugins.jquery.com/project/cookie
Nächster Schritt ist die Modifikation des idTabs Plugins, man suche folgende Stelle im Code (im Unkomprimierten Zeile 95):

$(id).show();
return s.change; //Option for changing url

und ändere dies zu:

$(id).show();
// write to cookie
$.cookie('PAGENAME_menu', id.split('#')[1], { expires: 1 });
return s.change; //Option for changing url

(PAGENAME_menu ist der Cookie Name, welcher an die Gegebenheiten angepasst werden muss).

Anschließend muss noch der Funktionsaufruf von idTabs Modifiziert werden:

$("#menu ul").idTabs();

zu

id = $.cookie("PAGENAME_menu");
if(id == null) { id = 0; } // failback if no cookie is availible
$("#menu ul").idTabs(id);

Nun wird bei jedem Tabwelchsel der aktuelle Tab in einen Cookie geschrieben. Beim neu laden der Seite wird dieser ausgelesen und dessen Wert (der letzte Tab) an idTabs als default Tab übergeben. Es muss lediglich beachtet werden, das keiner der Tabs das Attribut „class=’selected'“ hat, da unser Hack Trick sonst nicht funktioniert.

2 Antworten zu “jQuery idTabs bei Seitenwechsel speichern”

  1. sebi sagt:

    > Es muss lediglich beachtet werden, das keiner der Tabs das Attribut “class=’selected’” hat, da unser Hack Trick sonst nicht funktioniert.
    Immer diese Sematik ;)
    Es macht keinen Sinn eine CSS-Klasse ’selected‘ zu erstellen, da dies für mehere Elemente gedacht ist (mehrere Elemente auswählen…)
    Sematisch korrekt und sinnvoll sind IDs

    Wie oft noch? :P

  2. Martin sagt:

    Du kannst dich gerne an den Entwickler des jQuery idTabs Plugins wenden, der das so vorgesehen hat ;-)

Schreibe einen Kommentar