En utilisant prototype.js et Scriptaculous ici est de savoir comment rendre la simple bande-tab pour un site Web Dans cette version, le sujet n'est pas le TabStrip mais son fonctionnement. La caractéristique essentielle de ce script réside dans la simplicité d'utilisation et sa capacité à maintenir une page accessible même lorsque JavaScript est désactivé. Dans la pratique, vous pouvez même ajouter des pages à cette technique ont déjà été achevés qui respectent le minimum de la syntaxe HTML ci-dessous.
Afin de maintenir l'accessibilité, même si HTML Javascript est désactivé alors commençons par le cas standard, qui est, lorsque vous insérez l'ancre dans une page dans le format:
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 > < sera > < une href = "# tbs1"> Lien 1 </ une > </ eux > = "#tbs2" > Link 2 < / a >< / li > < sera > < une href = "# TBS2"> Lien 2 </ une > </ eux > = "#tbs3" > Link 3 < / a >< / li > < sera > < une href = "# tbs3"> Lien 3 </ une > </ eux > </ ul > "tbs1" >< / a > < une name = "tbs1"> </ une > < div > p > < p > Contenu # 1 </ p > </ div > "tbs2" >< / a > < une name = "TBS2"> </ une > < div > p > < p > Contenu # 2 </ p > </ div > "tbs3" >< / a > < une name = "tbs3"> </ une > < div > p > < p > Contenu # 3 </ p > </ div > |
Le code HTML ci-dessus fonctionne comme il n'est pas absolument faire usage de Javascript! Passons maintenant à notre code discret:
1 2 3 4 5 6 7 8 9 10 11 12 13 | window , 'load' , function ( ) { Événement. Observez (fenêtre, 'load', function () { ) . each ( function ( element ) { $ $ ('A [href ^=#]: pas ([href =#])'). Chaque fonction ((élément) { 'click' , function ( event ) { élément. observer ('click', function (event) { ) . each ( function ( element ) { element. next ( ) . style . display = "none" } ) $ $ ('Un nom [])'). Chaque fonction ((élément) {élément. Next (). Style. Display = "none"}) 'a[name="' + this . hash . substr ( 1 ) + '"]' ; var c = 'a [name = "" + cette hache substr (1) +''..] »; . each ( function ( element ) { new Effect. Appear ( element. next ( ) ) } ) ; $ $ (C). Chaque fonction ((élément) {nouvel effet. Appear (element. prochaines ())}); event ) ; } . bindAsEventListener ( element ) ) . Arrêtez événement (event);.} BindAsEventListener (élément)) }) 0 ; var i = 0; ) . each ( function ( element ) { if ( i > 0 ) element. next ( ) . style . display = "none" ; else i ++; } $ $ ('Un nom [])'). Chaque (function (element) {... If (i> 0) l'élément suivant () Style d'affichage = "none"; ailleurs i + +;} ); } ); |
Ce code - à notre place - non seulement transforme notre TabStrip dans une liste à puces, mais grâce à Scriptaculous , il ajoute aussi un bel effet fondu lors du passage d'un lien-onglet à l'autre.
Pigrissimo avez un exemple?
[...] Dans une page HTML. Cette source est une amélioration de la fonction présentée dans TabStrip discret. Dans cette version, ainsi que d'aligner le Code de la version 1.6 de prototype.js a été créé [...]