MooTools - Fisarmonica
La fisarmonica è il plugin più popolare fornito da MooTools. Aiuta a nascondere e rivelare i dati. Parliamone di più.
Creazione di una nuova fisarmonica
Gli elementi di base che una fisarmonica richiede sono coppie di levette e il loro contenuto. Creiamo coppie di intestazioni e contenuti dell'html.
<h3 class = "togglers">Toggle 1</h3>
<p class = "elements">Here is the content of toggle 1</p>
<h3 class = "togglers">Toggle 2</h3>
<p class = "elements">Here is the content of toggle 2</p>Dai un'occhiata alla seguente sintassi per capire come costruire una fisarmonica basata sulla struttura HTML di cui sopra.
Sintassi
var toggles = $$('.togglers');
var content = $$('.elements');
var AccordionObject = new Fx.Accordion(toggles, content);Esempio
Prendiamo un esempio che definisce le funzionalità di base di Accordion. Dai un'occhiata al seguente codice.
<!DOCTYPE html>
<html>
<head>
<style>
.togglers {
padding: 4px 8px;
color: #fff;
cursor: pointer;
list-style: none;
width: 300px;
background-color: #222;
border: 1px solid;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var toggles = $$('.togglers');
var content = $$('.elements');
var AccordionObject = new Fx.Accordion(toggles, content);
});
</script>
</head>
<body>
<h3 class = "togglers">Toggle 1</h3>
<p class = "elements">Here is the content of toggle 1</p>
<h3 class = "togglers">Toggle 2</h3>
<p class = "elements">Here is the content of toggle 2</p>
<h3 class = "togglers">Toggle 3</h3>
<p class = "elements">Here is the content of toggle 3</p>
</body>
</html>Riceverai il seguente output:
Produzione
Opzioni di fisarmonica
La fisarmonica offre straordinarie funzionalità. Queste funzionalità aiutano a modificare le opzioni per fornire un output personalizzato.
Schermo
Questa opzione determina quale elemento viene visualizzato al caricamento della pagina. L'impostazione predefinita è 0, quindi viene visualizzato il primo elemento. Per impostare un altro elemento, basta inserire un altro intero che corrisponde al suo indice. A differenza di "mostra", il display passerà all'elemento aperto.
Syntax
var AccordionObject = new Accordion(toggles, content {
display: 0 //default is 0
});spettacolo
Proprio come "display", show determina quale elemento sarà aperto quando la pagina viene caricata, ma invece di una transizione, "show" farà solo visualizzare il contenuto al caricamento senza alcuna transizione.
Syntax
var AccordionObject = new Accordion(toggles, content {
show: 0 //default is 0
});altezza
Quando è impostato su true, si verifica un effetto di transizione dell'altezza quando si passa da un elemento visualizzato all'altro. Questa è l'impostazione standard della fisarmonica che vedi sopra.
Syntax
var AccordionObject = new Accordion(toggles, content {
height: true //default is true
});larghezza
Funziona allo stesso modo del file heightopzione. Tuttavia, invece di modificare l'altezza per mostrare il contenuto, questo aiuta nella transizione della larghezza. Se utilizzi "larghezza" con un'impostazione standard, come abbiamo usato sopra, lo spazio tra l'interruttore del titolo rimarrà lo stesso, in base all'altezza del contenuto. Il div "contenuto" passerà quindi da sinistra a destra per essere visualizzato in quello spazio.
Syntax
var AccordionObject = new Accordion(toggles, content {
width: false //default is false
});opacità
Questa opzione determina se mostrare o meno un effetto di transizione di opacità quando nascondi o visualizzi alcuni contenuti. Dato che stiamo utilizzando le opzioni predefinite sopra, puoi vedere l'effetto lì.
Syntax
var AccordionObject = new Accordion(toggles, content {
opacity: true //default is true
});fixedHeight
Per impostare un'altezza fissa, devi correggere un numero intero (ad esempio, potresti mettere 100 per il contenuto alto 100 px). Questo dovrebbe essere usato con una sorta di proprietà di overflow CSS se si prevede di avere un'altezza fissa inferiore all'altezza naturale del contenuto.
Syntax
var AccordionObject = new Accordion(toggles, content {
fixedHeight: false //default is false
});larghezza fissa
Proprio come "fixedHeight" sopra, questo imposterà la larghezza se assegni a questa opzione un numero intero.
Syntax
var AccordionObject = new Accordion(toggles, content {
fixedWidth: false //default is false
});sempre nascosto
Questa opzione ti consente di aggiungere un controllo di attivazione / disattivazione ai titoli. Con questo impostato su true, quando fai clic sul titolo di un contenuto aperto, l'elemento di contenuto si chiuderà automaticamente senza aprire nient'altro. Puoi vedere l'esecuzione nel seguente esempio.
Syntax
var AccordionObject = new Accordion(toggles, content {
alwaysHide: false //default is false
});Eventi di fisarmonica
Questi eventi ti consentono di creare le tue funzionalità per ogni azione di Fisarmonica.
onActive
Questo verrà eseguito quando si apre un elemento. Passerà l'elemento di controllo toggle e l'elemento di contenuto che si sta aprendo e anche i parametri.
Syntax
var AccordionObject = new Accordion(toggles, content {
onActive: function(toggler, element) {
toggler.highlight('#76C83D'); //green
element.highlight('#76C83D');
}
});onBackground
Viene eseguito quando un elemento inizia a nascondersi e passa tutti gli altri elementi che si stanno chiudendo, ma non si aprono.
Syntax
var AccordionObject = new Accordion(toggles, content {
onBackground: function(toggler, element) {
toggler.highlight('#DC4F4D'); //red
element.highlight('#DC4F4D');
}
});onComplete
Questo è il tuo evento standard onComplete. Passa una variabile contenente l'elemento di contenuto.
Syntax
var AccordionObject = new Accordion(toggles, content {
onComplete: function(one, two, three, four){
one.highlight('#5D80C8'); //blue
two.highlight('#5D80C8');
three.highlight('#5D80C8');
four.highlight('#5D80C8');
}
});Metodi di fisarmonica
Questi metodi aiutano a creare e manipolare le sezioni della fisarmonica.
addSection ()
Con questo metodo, puoi aggiungere una sezione (una coppia di elementi di commutazione / contenuto). Funziona come molti degli altri metodi che abbiamo visto. Prima fai riferimento all'oggetto fisarmonica, usa .addSection, quindi puoi chiamare l'id del titolo, l'id del contenuto e infine indicare in quale posizione vuoi che appaia il nuovo contenuto (0 è il primo posto).
Syntax
AccordionObject.addSection('togglersID', 'elementsID', 2);Note- Quando aggiungi una sezione come questa, anche se verrà visualizzata nel punto dell'indice 2, l'indice effettivo sarà +1 l'ultimo indice. Quindi se hai 5 elementi nel tuo array (0-4) e aggiungi un sesto , il suo indice sarebbe 5 indipendentemente da dove lo aggiungi con .addSection ();
Schermo()
Questo ti permette di aprire un dato elemento. Puoi selezionare l'elemento in base al suo indice (quindi se hai aggiunto una coppia di elementi e desideri visualizzarlo, qui avrai un indice diverso da quello che useresti sopra.
Syntax
AccordionObject.display(5); //would display the newly added elementExample
Il seguente esempio spiega la funzione Accordion con alcuni effetti. Dai un'occhiata al seguente codice.
<!DOCTYPE html>
<html>
<head>
<style>
.togglers {
color: #222;
margin: 0;
padding: 2px 5px;
background: #EC7063;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
font-size: 15px;
font-weight: normal;
font-family: 'Andale Mono', sans-serif;
}
.ind {
background: #2E86C1;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
font-size: 20px;
color: aliceblue;
font-weight: normal;
font-family: 'Andale Mono', sans-serif;
width: 200px;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var toggles = $$('.togglers');
var content = $$('.elements');
var AccordionObject = new Fx.Accordion(toggles, content, {
show: 0,
height : true,
width : false,
opacity: true,
fixedHeight: false,
fixedWidth: false,
alwaysHide: true,
onActive: function(toggler, element) {
toggler.highlight('#DC7633'); //green
element.highlight('#DC7633');
$('active').highlight('#DC7633');
},
onBackground: function(toggler, element) {
toggler.highlight('#AED6F1'); //red
element.highlight('#AED6F1');
$('background').highlight('#F4D03F');
}
});
$('display_section').addEvent('click', function(){
AccordionObject.display(4);
});
});
</script>
</head>
<body>
<div id = "active" class = "ind">onActive</div>
<div id = "background" class = "ind">onBackground</div>
<div id = "accordion_wrap">
<p class = "togglers">Toggle 1: click here</p>
<p class = "elements">Here is the content of toggle 1 Here is the content of
toggle 1 Here is the content of toggle 1 Here is the content of toggle 1 Here
is the content of toggle 1 Here is the content of toggle 1 Here is the content
of toggle 1 Here is the content of toggle 1</p>
<p class = "togglers">Toggle 2: click here</p>
<p class = "elements">Here is the content of toggle 2</p>
<p class = "togglers">Toggle 3: click here</p>
<p class = "elements">Here is the content of toggle 3</p>
<p class = "togglers">Toggle 4: click here</p>
<p class = "elements">Here is the content of toggle 4</p>
</div>
<p>
100
<button id = "display_section" class = "btn btn-primary">
display section
</button>
</p>
</body>
</html>Output
Fai clic su ciascuna sezione Toggle, quindi troverai i dati nascosti e gli indicatori di evento per ogni azione.