Nwlapcug.com


Come fare la fisarmonica di MooTools inversa



MooTools è un framework JavaScript che consente di scrivere codice cross-browser che permette per i comportamenti di extensible, retrattili e riutilizzabili come quelli usati in fisarmoniche sito espandibile e retrattile. Quando posizionate il mouse sopra un elemento di fisarmonica di MooTools, clicca per ottenere l'elemento di fisarmonica per espandere. Facendo clic su un altro elemento, si ritrae il primo menu cliccato e si espande il nuovo elemento. Dopo l'espansione tutti gli elementi della fisarmonica, è sufficiente fare clic sulla prima voce di menu nuovo per invertire la fisarmonica nella sua posizione originale.

Istruzioni

1

Scaricare e installare la console di framework MooTools JavaScript. Copiare o scrivere nel codice HTML della pagina Web.

2

Aprire la console e creare il markup HTML per MooTools fisarmonica dove si desidera. Digitare il seguente codice per ottenere il quadro della fisarmonica a comparire:

< div id = "mymenu" >
< classe h3 = "toggler menusection" > Menu sezione 1 < / h3 >
< div class = "elemento menusection" >
< ul >
< li >< un href = "1" > Link 1 < /a >< / li >
< li >< un href = "2" > Link 2 < /a >< / li >
< li >< un href = "3" > Link 3 < /a >< / li >
< li >< un href = "4" > Link 4 < /a >< / li >
</UL >
< / div >

Modificare le intestazioni "sezione menu toggler" a qualunque titolo che si desidera utilizzare nella vostra fisarmonica.

< classe h3 = "toggler menusection" > Menu sezione 2 < / h3 >
< div class = "elemento menusection" >
< ul >
< li >< un href = "1" > Link 1 < /a >< / li >
< li >< un href = "2" > Link 2 < /a >< / li >
</UL >
< / div >
<!-qui aggiungere altre sezioni...-->
< / div > "

3

Digitare il codice per collegare il quadro MooTools alla pagina HTML. Inserire questo tag sopra il tag di intestazione: < script type = "text/javascript" src="mootools.svn.js" >< / script >.

4

Digitare il framework JavaScript per la classe di fisarmonica di MooTools tra tag < head > della pagina:

< script type = "text/javascript" >
window.addEvent ('domready', Function () {
fisarmonica var = nuova fisarmonica ('h3.menusection', 'div.menusection', {
opacità: falso,
onActive: function (toggler, elemento) {
toggler.setStyle ('colore', ' #333333');
toggler.setStyle ('sfondo', '#FFFFCC');
},
onBackground: function (toggler, elemento) {
toggler.setStyle ('colore', '#FFFFFF');
toggler.setStyle ('sfondo', ' #999999');
}
}, $('mymenu'));
});
< / script >

5

Personalizzare il codice CSS nel modo desiderato. Regolare le dimensioni della fisarmonica, il colore di sfondo, dimensione carattere e colore del carattere per la dimensione e il tipo desiderato. Quando si programma in Java, o CSS, queste modifiche dipenderà come larghezza desiderato la fisarmonica per essere, sullo sfondo i colori si uso, dimensioni e stile del carattere desiderato. Per esempio, aggiungere le seguenti modifiche CSS per rendere il pixel di larghezza con un margine di 1 pixel, uno sfondo grigio e un carattere di 12 punti e fisarmonica 500:

principale {width: 500px; margine: 1opx auto;}

#accordion h3{ background:#cccccc;}
border-bottom: solid 2px #999999;
font-size:12px;
6

Scrivere il resto del codice HTML o copiare il codice di altri HTML lo sviluppo di console. Caricare la pagina al tuo dominio tramite il vostro programma FTP.

Consigli & Avvertenze

  • Anche se si tratta di un codice di base di fisarmonica, ci sono molte varianti di fisarmoniche di MooTools. Uno sviluppatore sarà aggiungere, eliminare o modificare il codice per ottenere il tipo appropriato, dimensione e lo stile della fisarmonica che vuole.