jQuery UI Tabs: Auswahl des richtigen Tabs bei Reload
Ein gängiges Problem beim jQuery UI Tab Plugin ist, dass die Auswahl eines Tabs nicht gespeichert wird. Klickt man also beispielsweise auf Tab 4 und führt dann einen Reload der Webseite durch, landet man wieder beim ersten Tab. Wenn es einmal passiert, ist es sicherlich nicht ganz so tragisch, aber wenn man eine Anwendung hat, bei der diese Situation öfters auftritt, kann es schnell nervig für die Besucher werden. Wie ihr das Problem umgehen könnt, möchte ich euch mit dem Tipp aus diesem Post zeigen.
Das eigentlich Problem an der Sache ist, dass der jeweilige Tabaufruf via Javascript/jQuery realisiert wird. Es ist so erst einmal nicht möglich die aktuelle Tab-Auswahl zu speichern. Aber jQuery wäre nicht jQuery, wenn es nicht auch dafür eine simple, aber geniale Lösung gibt.
Problem: Bei Reload wird der vorher ausgewählter Tab nicht mehr ausgewählt
Als Erstes benötigt ihr das Cookie-Plugin für jQuery. Das Plugin wird, wie jQuery, im HEAD-Tag eingebunden.
Nachdem ihr das Cookie-Plugin eingebunden habt, müsst ihr lediglich dem Tab-Plugin mitteilen, dass er zum Speichern der aktuellen Tab-Auswahl Cookie verwenden soll. Das könnt ihr folgendermaßen machen:
$( ".selector" ).tabs({ cookie: { expires: 7 } });
Mit expires gebt ihr die Gültigkeit des Cookies in Tagen an. In diesem Fall wären es 7 Tage.
Lösung: Der ausgewählte Tab wird nachdem Reload wieder ausgewählt
Wo ich dran interessiert wäre, wäre ne Möglichkeit durch verschiedene Links auf anderen Seiten bereits verschiedene Tabs an zu wählen. Ist sowas denn möglich?
Hey Kevin,
wenn ich dich richitg verstanden habe, sollte dir diese Methode wahrscheinlich weiterhelfen:
http://jqueryui.com/demos/tabs/#method-disable
Viel Spaß,
Dennis
Was ich meine ist eher:
Du hast auf der Startseite (A) 3 Links und je nachdem, welchen man klickt öffnet sich der richtige von 3 Tabs auf Seite B. (:
Hallo,
hätte da mal ne Frage zu dem Anzeigen des richtigen Tabs beim Reload
Wo muss ich denn den Code :
$( “.selector” ).tabs({ cookie: { expires: 7 } });
nochmal einbinden?
Hab Ihn auf meiner Seite eingebunden wo ich auch das CSS und die anderen 2 js dateien eingebunden hab eingebunden doch leider springt die Anwendung immer noch auf den ersten Tag zurück
Hey Matthias,
den Code musst du in den <head> Bereich deiner Webseite packen. Zusätzlich muss der Code innerhalb von <script>-Tags sein.
<script type=”text/javascript”>
$(document).ready(function(){
$( “.selector” ).tabs({ cookie: { expires: 7 } });
});
</script>
Viele Grüße,
Dennis
Hi Kevin,
die Tabs haben ja einen Anker bzw. einen namen.
Wenn die Tabs auf Seite B “tab1″, “tab2″, “tab3″, … heissen, kannst Du einen bestimmten Tab (z.b. tab3) beim Laden öffnen, indem Du
http://www.example.com/b#tab3
als Ziel angibst.
Da funktioniert leider nur, wenn du auf Seite B den aktive Tab nicht per cookie, wie von Dennis beschrieben, merkst
Dennis: vielen Dank, dein Post war sehr hilfreich
Martin