Articles taggés avec 'accordéon'

Accordéon simple avec la classe de USimpleTabStrip

La classe USimpleTabStrip , présenté discret TabStrip simple , peut également être utilisé pour créer un menu simple accordéon .
offerti da Scriptaculous : En utilisant les effets de la BlindUp() et BlindDown() offerts par Scriptaculous :

1
2
3
4
5
6
7
8
9
10
fonction init () {
USimpleTabStrip ( ) ; UTS USimpleTabStrip = new ();
; UTS Init ().;
function ( e ) { UTS. OnShow = function (e) {
( e ) ; . Effet de nouvelles BlindDown (s);
}
function ( e ) { UTS. OnHide = function (e) {
( e ) ; . Effet de nouvelles BlindUp (s);
}
}

Et la relocalisation des éléments HTML ( source 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 = "accordéon">
"#acc1" > Accordion 1 < / a > < une href = "# ACC1"> Accordéon 1 </ une >
"acc1" >< / a > < une name = "ACC1"> </ une >
< div >
h1 > < h1 > # 1 Content </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

"#acc2" > Accordion 2 < / a > < une href = "# ACC2"> Accordéon 2 </ une >
"acc2" >< / a > < une name = "ACC2"> </ une >
< div >
h1 > < h1 > # 2 Contenu </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

"#acc3" > Accordion 3 < / a > < une href = "# ACC3"> Accordéon 3 </ une >
"acc3" >< / a > < une name = "ACC3"> </ une >
< div >
h1 > < h1 > # 3 Content </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

</ div >

Vous obtenez un menu simple accordéon qui peut être utilisé très rapidement.

Suite ...

Accordéon 2.0

l'image Il avait déjà parlé de cette bibliothèque Javascript discret construit par le même auteur LightWindow 2.0 . Est maintenant publié la version 2.0, qui fait toujours usage de scriptaculous .
Parmi les plus intéressantes est sa capacité à «engager» l'accordéon dans l'autre, à la fois horizontalement et verticalement dans la MODL.
Puis loin de l'opération originale des classiques a été ajouté Accrodion le comportement de l'ouverture / fermeture. Sur le site de , vous pouvez télécharger le script (portant la mention encore 1.0!?) et des exemples de code d'accès.

Suite ...

Accordéon pour les Scriptaculous

Enfin, un joli script en JavaScript (download Accordéon 1.0 ), simple et léger, ce qui vous permet d'ajouter le composant Accordion dans le Flash et mootools bibliothèque en utilisant scriptaculous . En effet, cet objet avait disparu, ce qui est utile à de nombreuses reprises. Cette version est extrêmement simple et vous permet de créer orizzonali accordéon qui est vertical. Le script est gratuit , mais vous pouvez faire un petit don pour aider l'auteur à acheter un beau MacPro ;)

Pour utiliser il suffit d'insérer ces lignes de code simple:

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

Le balisage HTML est immédiat:

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

Un exemple pratique:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/ / Syntaxe générale
'container-selector' , options ) ; l'accordéon de nouvelles («conteneur-sélecteur, options);


/ / Exemple horizontale
new accordion ( '#top_container' , { horizontalAccordion var = new accordéon ('# top_container', {
classnames: {
, toggle: 'horizontal_accordion_toggle »,
, toggleActive: «horizontal_accordion_toggle_active»,
contenu: «horizontal_accordion_content '
},
DefaultSize: {
largeur: 525
},
direction: «horizontaux»
});

/ / Vertical accordéon
new accordion ( '#bottom_container' ) ; verticalAccordion var = new accordéon ('# bottom_container');

Suite ...