USimpleTabStrip JavaScript discreto es el de mejorar el ancla clásica (todavía) en el interior de una página HTML. Esta fuente es una mejora de la función presentada en TabStrip discreto . En esta versión, así como adaptar el código para liberar 1.6 de prototype.js ha creado una verdadera clase para manejar el TabStrip. La liberación se presenta aquí es muy simple y directo. Su trabajo principal consiste en la adición de un evento de clic en el vínculo de anclaje normal. Estilos CSS no se presentan también, sólo para dejar la máxima libertad de acción, pero usted puede conseguir un TabStrip efectiva con unas pocas líneas adicionales de código CSS, consulte Adición de estilos CSS a continuación.
Código HTML
La clase USimpleTabStrip trabaja en un simple HTML, sftuttando el ancla ( <a name></a> ):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <-! Simple lista de enlaces de la página -> < ul > = "#tbs1" > Link 1 < / a >< / li > < a > < un href = "# Tbs1"> Enlace 1 </ un > </ viaje > = "#tbs2" > Link 2 < / a >< / li > < a > < un href = "# tbs2"> Enlace 2 </ un > </ viaje > = "#tbs3" > Link 3 < / a >< / li > < a > < un href = "# tbs3"> Enlace 3 </ un > </ viaje > </ ul > <- Bloques, separadores -> "tbs1" >< / a > < un name = "Tbs1"> </ un > < div > h1 > < h1 > Listado # 1 </ h1 > p > < p > Bla, bla, bla .... </ p > </ div > "tbs2" >< / a > < un name = "tbs2"> </ un > < div > h1 > < h1 > Listado # 2 </ h1 > p > < p > Bla, bla, bla .... </ p > </ div > "tbs3" >< / a > < un name = "tbs3"> </ un > < div > h1 > < h1 > Data # 3 </ h1 > p > < p > Bla, bla, bla .... </ p > </ div > |
funziona da contenitore. La etiqueta div justo por debajo del anclaje a trabajar como un contenedor.
La Clase USimpleTabStrip
La creación de instancias USimpleTabStrip ningún efecto hasta que se llama el método Init() . En este ejemplo se puede ver la clase de acción, haga clic en el enlace para activar Init.
Inicialización
1 2 3 4 5 6 7 8 9 10 11 | / / Una vez finalizado el documento llama a init (). / / Se puede utilizar cualquier otro método, como Event.observe (ventana, 'load', ...); / / Dependiendo de las herramientas disponibles en este caso es / / API de Google para la carga de las bibliotecas init ) ; Google setOnLoadCallback (init).; / ** * Cuando se carga la página por disparo * / función init () { new USimpleTabStrip ( ) ; uts USimpleTabStrip var = new (); } |
Métodos
-
Init()
Inicializa la clase y activos en el TabStrip -
showFirstTab()
Hace que todas las fichas a excepción de la primera -
showTabs(v)
) tutti i Tabs Mostrar (true) / ocultar (false) todas las pestañas -
version()
Muestra la versión de la clase
Devoluciones de llamada de eventos
Puede conectar eventos para mostrar / ocultar la ficha, como en este ejemplo se utiliza Scriptaculous para añadir un efecto de fundido para mostrar la ficha (haga clic en el enlace SetEffects):
1 2 3 4 5 | new USimpleTabStrip ( ) ; uts USimpleTabStrip var = new (); / / Se utiliza Scriptaculous para ver una ficha function ( e ) { uts. OnShow = function (s) { ( e ) ; . Efecto nueva comparecencia (s); } |
Adición de estilos CSS
Como se mencionó al principio, con algunas definiciones de estilos CSS se puede hacer una verdadera TabStrip diseño . He aquí cómo editar el código HTML para asociar estilos CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | "tabstrip_button" > < div class = "tabstrip_button"> < ul > = "#tbs1" > Tab 1 < / a >< / li > < a > < un href = "# Tbs1"> Pestaña 1 </ un > </ viaje > = "#tbs2" > Tab 2 < / a >< / li > < a > < un href = "# tbs2"> Pestaña 2 </ un > </ viaje > = "#tbs3" > Tab 3 < / a >< / li > < a > < un href = "# tbs3"> Pestaña 3 </ un > </ viaje > </ ul > </ div > "tabstrip_boxes" > < div class = ""> tabstrip_boxes "tbs1" >< / a > < un name = "Tbs1"> </ un > "tabstrip" > < div class = "barra de pestañas"> h1 > < h1 > Contenido # 1 </ h1 > p > < p > Bla, bla, bla .... </ p > </ div > .... </ div > |
Ejemplo simple de CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | / ** * Ejemplo de Diseño de Estilo de TabStrip * * @ Autor Giovambattista Fazioli * @ @ E-mail g.fazioli undolog.com * @ Web http://www.undolog.com * * / div. tabstrip_button { 300px ; ancho: 300px; } div. tabstrip_button a, , div tabstrip_button a:. enlace, { div tabstrip_button a:. visitó { block ; display: block; 8px ; padding: 8px; #aaa ; background: # aaa; 1px solid #666 ; border-right: 1px solid # 666; 1px solid #666 ; border-bottom: 1px solid # 666; } { div. tabstrip_button a: hover { #ddd ; background: # ddd; } div. tabstrip_button ul { none ; list-style: none; } div. tabstrip_button li { left ; float: left; } div. tabstrip_boxes { block ; display: block; both ; clear: both; 700px ; ancho: 700px; 500px ; altura: 500px; #aaa ; background: # aaa; 8px ; padding: 8px; } div. {tab franja #fff ; background: # FFF; 12px ; padding: 12px; 2px inset #eee ; la frontera: 2px # eee inserción; } |
Descargar
USimpleTabStrip está alojado en Google Code, se puede descargar el RAW aquí
[...] USimpleTabStrip clase, presentado en TabStrip simple discreto, también se puede utilizar para realizar un menú sencillo Accordion.Utilizzando los efectos de la [...]