Mit Prototype.js und Scriptaculous hier ist, wie man das einfache-tab-Streifen für eine Website in dieser Version zu erreichen, ist das Thema nicht, aber das Register seinen Betrieb. Das wesentliche Merkmal dieses Skript liegt in der Einfachheit der Bedienung und die Möglichkeit, eine Seite zugänglich, auch wenn Javascript deaktiviert ist beizubehalten. In der Praxis können Sie sogar Seiten dieser Technik schon so lange abgeschlossen, als sie erfüllen die Mindestanforderungen der HTML-Syntax unten.
Um die Zugänglichkeit auch wenn Javascript deaktiviert, so dass wir aus dem Standard-HTML Fall, das heißt, zu starten, wenn Sie den Anker legen innerhalb einer Seite im Format erhalten:
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 > < li > < a href = "# tbs1"> Link 1 </ a > </ li > = "#tbs2" > Link 2 < / a >< / li > < li > < a href = "# TBS2"> Link 2 </ a > </ li > = "#tbs3" > Link 3 < / a >< / li > < li > < a href = "# tbs3"> Link 3 </ a > </ li > </ ul > "tbs1" >< / a > < a name = "tbs1"> </ a > < div > p > < p > Content # 1 </ p > </ div > "tbs2" >< / a > < a name = "TBS2"> </ a > < div > p > < p > Content # 2 </ p > </ div > "tbs3" >< / a > < a name = "tbs3"> </ a > < div > p > < p > Content # 3 </ p > </ div > |
Der HTML-Code oben funktioniert, wie es absolut von Javascript verwenden nicht! Wir kommen nun zu unserem Code Unauffällig drehen:
1 2 3 4 5 6 7 8 9 10 11 12 13 | window , 'load' , function ( ) { Ereignis. Beachten (window, 'load', function () { ) . each ( function ( element ) { $ $ ('A [href ^ = #]: not ([href = #])') Jede (function (element) {. 'click' , function ( event ) { Element. beobachten ('click', function (event) { ) . each ( function ( element ) { element. next ( ) . style . display = "none" } ) $ $ ('A [name])'). Jede (function (element) {Element. Next (). Stil. Anzeige = "none"}) 'a[name="' + this . hash . substr ( 1 ) + '"]' ; var c = 'a [name =' "+ diese Hash substr (1) +. '."]'; . each ( function ( element ) { new Effect. Appear ( element. next ( ) ) } ) ; $ $ (C) Jede (function (element) {new Effect erscheinen (element. next ()).}). 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])') Jede (function (element) {... If (i> 0) Element Next ()-Art Display = "none"; sonst i + +;} ); } ); |
Dieser Code - in unserem Ort - nicht nur verwandelt unsere Aufzählung in einem Register aber dank Scriptaculous , es fügt auch einen schönen Fade-Effekt beim Wechsel von einem Link-Register zu einem anderen.
Sind pigrissimo ein Beispiel?
[...] Im Rahmen einer HTML-Seite. Diese Quelle ist eine Verbesserung der Funktion in Unauffällig Tabstrip vorgestellt. In dieser Version auch ausrichten den Code zur Freigabe von 1,6 prototype.js wurde [...]