Artículos con la etiqueta 'acordeón'

Acordeón simple con la clase USimpleTabStrip

La clase USimpleTabStrip , presentó TabStrip simple discreto , también se puede utilizar para crear un sencillo menú de acordeón .
offerti da Scriptaculous : Uso de los efectos de BlindUp() y BlindDown() ofrecidos por Scriptaculous :

1
2
3
4
5
6
7
8
9
10
la función init () {
USimpleTabStrip ( ) ; UTS USimpleTabStrip = new ();
; UTS Init ().;
function ( e ) { UTS. OnShow = function (e) {
( e ) ; . Efecto BlindDown nuevo (s);
}
function ( e ) { UTS. OnHide = function (e) {
( e ) ; . Efecto BlindUp nuevo (s);
}
}

Y la reubicación de los elementos HTML ( código HTML ):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
"accordion" > < div class = "acordeón">
"#acc1" > Accordion 1 < / a > < un href = "# ACC1"> Accordion 1 </ un >
"acc1" >< / a > < un name = "ACC1"> </ un >
< div >
h1 > < h1 > # 1 de contenido </ h1 >
p > < p > Bla bla bla .... </ p >
</ div >

"#acc2" > Accordion 2 < / a > < un href = "# ACC2"> Acordeón 2 </ un >
"acc2" >< / a > < un name = "ACC2"> </ un >
< div >
h1 > < h1 > # 2 Contenido </ h1 >
p > < p > Bla bla bla .... </ p >
</ div >

"#acc3" > Accordion 3 < / a > < un href = "# ACC3"> Acordeón 3 </ un >
"acc3" >< / a > < un name = "ACC3"> </ un >
< div >
h1 > < h1 > # 3 Contenido </ h1 >
p > < p > Bla bla bla .... </ p >
</ div >

</ div >

Usted recibe un acordeón menú simple que se puede utilizar muy rápidamente.

Continuación ...

Acordeón 2.0

imagen Él ya había hablado de esta discreta biblioteca Javascript construido por el mismo autor LightWindow 2.0 . Ahora se lanza la versión 2.0, que siempre hace uso de scriptaculous .
Entre los más interesantes es su capacidad para "comprometer" el acordeón dentro de la otra, tanto horizontal como verticalmente en el MODL.
A continuación, lejos de la operación original de los clásicos se ha añadido Accrodion el comportamiento de apertura / cierre. En el sitio se puede descargar el script (marcados con las palabras todavía 1,0?) y ejemplos de código de acceso.

Continuación ...

Acordeón para Scriptaculous

Finalmente, un guión muy bien en JavaScript (descarga de Acordeón 1.0 ), simple y ligero, que le permite añadir el componente Accordion de Flash y mootools biblioteca con scriptaculous . De hecho, este objeto había desaparecido, lo cual es útil en muchas ocasiones. Esta versión es muy simple y le permite crear orizzonali acordeón que es vertical. El guión es libre , pero usted puede hacer una pequeña donación para ayudar al autor a comprar un buen MacPro ;)

Para utilizar sólo tiene que insertar estas líneas de código simple:

1
2
3
"text/javascript" src = "javascript/prototype.js" >< / script > < script de type = "text / javascript" src = "javascript / prototype.js"> </ script de >
"text/javascript" src = "javascript/effects.js" >< / script > < script de type = "text / javascript" src = "javascript / effects.js"> </ script de >
"text/javascript" src = "javascript/accordion.js" >< / script > < script de type = "text / javascript" src = "javascript / accordion.js"> </ script de >

El código HTML es inmediata:

1
2
3
4
5
6
7
8
9
10
11
"accordion_toggle" > Title Bar < / h3 > < h3 class = "accordion_toggle"> Barra de título </ h3 >
"accordion_content" > < div class = "accordion_content">
...
</ div >
...
...
...
"accordion_toggle" > Title Bar < / h3 > < h3 class = "accordion_toggle"> Barra de título </ h3 >
"accordion_content" > < div class = "accordion_content">
...
</ div >

Un ejemplo práctico:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/ / Sintaxis general
'container-selector' , options ) ; acordeón nuevo ('contenedor-selector', opciones);


/ / Ejemplo Horizontal
new accordion ( '#top_container' , { horizontalAccordion acordeón var = new ('# top_container', {
classNames: {
, cambiar: "horizontal_accordion_toggle,
, toggleActive: "horizontal_accordion_toggle_active,
contenido: "horizontal_accordion_content '
},
DefaultSize: {
ancho: 525
},
dirección: 'horizontal'
});

/ / Vertical de acordeón
new accordion ( '#bottom_container' ) ; verticalAccordion acordeón var = new ('# bottom_container');

Continuación ...