Usando prototype.js y Scriptaculous aquí es cómo hacer que la simple tira de la pestaña de un sitio Web En esta versión el sujeto no es el de Tabstrip pero su funcionamiento. La característica esencial de este script se encuentra en la sencillez de uso y capacidad de mantener una página accesible, incluso cuando JavaScript no está habilitado. En la práctica, incluso se puede añadir páginas a esta técnica ya se han completado que se respeten los mínimos de la sintaxis HTML se muestra a continuación.
Para mantener la accesibilidad, incluso cuando HTML Javascript desactivado así que vamos a empezar desde el caso estándar, es decir, cuando se inserta el ancla dentro de una página en el formato:
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 > < a > < un href = "# tbs1"> Link 1 </ un > </ a > = "#tbs2" > Link 2 < / a >< / li > < a > < un href = "# tbs2"> Link 2 </ un > </ a > = "#tbs3" > Link 3 < / a >< / li > < a > < un href = "# tbs3"> Link 3 </ un > </ a > </ ul > "tbs1" >< / a > < un name = "tbs1"> </ un > < div > p > < p > Contenido # 1 </ p > </ div > "tbs2" >< / a > < un name = "tbs2"> </ un > < div > p > < p > Contenido # 2 </ p > </ div > "tbs3" >< / a > < un name = "tbs3"> </ un > < div > p > < p > Contenido # 3 </ p > </ div > |
El código HTML encima de las obras, ya que no hace absolutamente hacer uso de Javascript! Pasemos ahora a nuestro código discreto:
1 2 3 4 5 6 7 8 9 10 11 12 13 | window , 'load' , function ( ) { Evento. Observe (ventana, 'load', function () { ) . each ( function ( element ) { $ $ ('A [href ^=#]: no ([href =#])'). Cada función ((elemento) { 'click' , function ( event ) { elemento. observe ('click', function (evento) { ) . each ( function ( element ) { element. next ( ) . style . display = "none" } ) $ $ ('Un nombre [])'). Cada función ((elemento) {Elemento de Estilo. Siguiente ().. Display = "none"}) 'a[name="' + this . hash . substr ( 1 ) + '"]' ; var c = 'a [name = "' + este hashes substr (1) +''..] '; . each ( function ( element ) { new Effect. Appear ( element. next ( ) ) } ) ; $ $ (C). Cada función ((elemento) {nuevo efecto. Appear (element. siguiente ())}); event ) ; } . bindAsEventListener ( element ) ) . Detener Evento (evento);.} BindAsEventListener (elemento)) }) 0 ; var i = 0; ) . each ( function ( element ) { if ( i > 0 ) element. next ( ) . style . display = "none" ; else i ++; } $ $ ('Un nombre [])'). Cada (function (elemento) {... If (i> 0) Next Element () Estilo de visualización = "none"; más i + +;} ); } ); |
Este código - en nuestro lugar - no sólo transforma nuestra de Tabstrip en una lista con viñetas, pero gracias a Scriptaculous , sino que también añade un agradable efecto de fundido al pasar de un enlace de la pestaña a otra.
Pigrissimo un ejemplo?
[...] Dentro de una página HTML. Esta fuente es una mejora de la función presentada en el de Tabstrip discreto. En esta versión, así como alinear el código de la Versión 1.6 de prototype.js fue creado [...]