Mit prototype.js und Scriptaculous hier ist, wie die simple-Tableiste für eine Website in dieser Version das Thema ist nicht die Tabstrip aber seinen Betrieb zu machen. Das wesentliche Merkmal dieses Skript liegt in der Einfachheit der Anwendung und die Fähigkeit zur Aufrechterhaltung einer Seite zugänglich, auch wenn JavaScript deaktiviert ist. In der Praxis kann man sogar Seiten hinzufügen, um diese Technik sind bereits abgeschlossen, die die Mindestzahl der der HTML-Syntax dargestellt.
Zur Aufrechterhaltung Erreichbarkeit, auch wenn Javascript deaktiviert HTML also lasst uns aus der Standard-Fall, also wenn Sie den Anker legen innerhalb einer Seite im Format starten:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | < ul > = "#tbs1" > Link 1 < / a >< / li > < wird > < ein href = "# tbs1"> Link 1 </ eins > </ sie > = "#tbs2" > Link 2 < / a >< / li > < wird > < ein href = "# tbs2"> Link 2 </ eins > </ sie > = "#tbs3" > Link 3 < / a >< / li > < wird > < ein href = "# tbs3"> Link 3 </ eins > </ sie > </ ul > "tbs1" >< / a > < ein name = "tbs1"> </ eins > < div > p > < p > Content # 1 </ p > </ div > "tbs2" >< / a > < ein name = "tbs2"> </ eins > < div > p > < p > Content Nr. 2 </ p > </ div > "tbs3" >< / a > < ein name = "tbs3"> </ eins > < div > p > < p > Content # 3 </ p > </ div > |
Die oben genannten HTML-Code funktioniert, wie es nicht unbedingt machen keine Verwendung von Javascript! Wenden wir uns nun unseren Code Unauffällig wiederum:
1 2 3 4 5 6 7 8 9 10 11 12 13 | window , 'load' , function ( ) { Event. Beobachten (window, 'load', function () { ) . each ( function ( element ) { $ $ ('A [href ^=#]: nicht ([href =#])'). each (function (element) { 'click' , function ( event ) { Element. beobachten ('click', function (event) { ) . each ( function ( element ) { element. next ( ) . style . display = "none" } ) $ $ ('A [name ])'). each (function (element) {element. Next (). Style. Display = "none"}) 'a[name="' + this . hash . substr ( 1 ) + '"]' ; var c = 'a [name = "" + diese Hashes substr (1) +''..] "; . each ( function ( element ) { new Effect. Appear ( element. next ( ) ) } ) ; $ $ (C). Each (function (element) {new Effect. Appear (element. nächsten ())}); event ) ; } . bindAsEventListener ( element ) ) . Event-Stop (event);.} BindAsEventListener (element)) }) 0 ; var i = 0; ) . each ( function ( element ) { if ( i > 0 ) element. next ( ) . style . display = "none" ; else i ++; } $ $ ('A [name ])'). each (function (element) {... If (i> 0) Element Next () Stil Display = "none"; sonst i + +;} ); } ); |
Dieser Code - in unserem Ort - nicht nur verwandelt unser Tabstrip in einer Aufzählung, aber dank Scriptaculous , es fügt auch einen netten Fade-Effekt beim Wechsel von einem Link-Register zum anderen.
Pigrissimo ein Beispiel?
[...] Innerhalb einer HTML-Seite. Diese Quelle ist eine Verbesserung der Funktion in Unauffällig Tabstrip vorgestellt. In dieser Version sowie Ausrichtung der Code mit Release 1.6 von prototype.js geschaffen wurde [...]