MooTools - Accordéon
Accordion est le plugin le plus populaire fourni par MooTools. Cela aide à cacher et à révéler les données. Laissez-nous en discuter davantage.
Créer un nouvel accordéon
Les éléments de base dont un accordéon a besoin sont des paires de bascules et leur contenu. Créons des paires d'en-têtes et de contenus du 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>Jetez un œil à la syntaxe suivante pour comprendre comment construire un accordéon basé sur la structure HTML ci-dessus.
Syntaxe
var toggles = $$('.togglers');
var content = $$('.elements');
var AccordionObject = new Fx.Accordion(toggles, content);Exemple
Prenons un exemple qui définit la fonctionnalité de base d'Accordion. Jetez un œil au code suivant.
<!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>Vous recevrez la sortie suivante -
Production
Options d'accordéon
L'accordéon offre d'énormes fonctionnalités. Ces fonctionnalités aident à peaufiner les options pour donner une sortie personnalisée.
afficher
Cette option détermine quel élément s'affiche lors du chargement de la page. La valeur par défaut est 0, donc le premier élément s'affiche. Pour définir un autre élément, insérez simplement un autre entier qui correspond à son index. Contrairement à «show», l'affichage fera la transition de l'élément ouvert.
Syntax
var AccordionObject = new Accordion(toggles, content {
display: 0 //default is 0
});spectacle
Tout comme «affichage», show détermine quel élément sera ouvert lors du chargement de la page, mais au lieu d'une transition, «show» fera simplement afficher le contenu au chargement sans aucune transition.
Syntax
var AccordionObject = new Accordion(toggles, content {
show: 0 //default is 0
});la taille
Lorsqu'il est défini sur true, un effet de transition de hauteur se produit lors du basculement entre les éléments affichés. Il s'agit du réglage d'accordéon standard que vous voyez ci-dessus.
Syntax
var AccordionObject = new Accordion(toggles, content {
height: true //default is true
});largeur
Cela fonctionne de la même manière que le heightoption. Cependant, au lieu de changer la hauteur pour afficher le contenu, cela facilite la transition de la largeur. Si vous utilisez «largeur» avec une configuration standard, comme nous l'avons utilisé ci-dessus, l'espace entre la bascule de titre restera le même, en fonction de la hauteur du contenu. Le div «contenu» passera alors de gauche à droite pour s'afficher dans cet espace.
Syntax
var AccordionObject = new Accordion(toggles, content {
width: false //default is false
});opacité
Cette option détermine s'il faut ou non afficher un effet de transition d'opacité lorsque vous masquez ou affichez du contenu. Puisque nous utilisons les options par défaut ci-dessus, vous pouvez voir l'effet ici.
Syntax
var AccordionObject = new Accordion(toggles, content {
opacity: true //default is true
});FixedHeight
Pour définir une hauteur fixe, vous devez fixer un entier (par exemple, vous pouvez mettre 100 pour le contenu de 100 px de haut). Cela devrait être utilisé avec une sorte de propriété de débordement CSS si vous prévoyez d'avoir une hauteur fixe inférieure à la hauteur naturelle du contenu.
Syntax
var AccordionObject = new Accordion(toggles, content {
fixedHeight: false //default is false
});largeur fixe
Tout comme "fixedHeight" ci-dessus, cela définira la largeur si vous donnez à cette option un entier.
Syntax
var AccordionObject = new Accordion(toggles, content {
fixedWidth: false //default is false
});toujoursHide
Cette option vous permet d'ajouter une commande à bascule aux titres. Avec cette valeur true, lorsque vous cliquez sur un titre de contenu ouvert, l'élément de contenu se ferme automatiquement sans rien ouvrir d'autre. Vous pouvez voir l'exécution dans l'exemple suivant.
Syntax
var AccordionObject = new Accordion(toggles, content {
alwaysHide: false //default is false
});Événements d'accordéon
Ces événements vous permettent de créer votre fonctionnalité pour chaque action d'Accordion.
onActive
Cela s'exécutera lorsque vous basculerez ouvrir un élément. Il passera l'élément de contrôle à bascule et l'élément de contenu qui s'ouvre ainsi que les paramètres.
Syntax
var AccordionObject = new Accordion(toggles, content {
onActive: function(toggler, element) {
toggler.highlight('#76C83D'); //green
element.highlight('#76C83D');
}
});onBackground
Cela s'exécute lorsqu'un élément commence à se cacher et passe tous les autres éléments qui se ferment mais ne s'ouvrent pas.
Syntax
var AccordionObject = new Accordion(toggles, content {
onBackground: function(toggler, element) {
toggler.highlight('#DC4F4D'); //red
element.highlight('#DC4F4D');
}
});onComplete
Il s'agit de votre événement onComplete standard. Il passe une variable contenant l'élément de contenu.
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');
}
});Méthodes d'accordéon
Ces méthodes vous aident à créer et à manipuler des sections d'accordéon.
addSection ()
Avec cette méthode, vous pouvez ajouter une section (une paire de bascule / élément de contenu). Cela fonctionne comme beaucoup d'autres méthodes que nous avons vues. Faites d'abord référence à l'objet accordéon, utilisez .addSection, puis vous pouvez appeler l'id du titre, l'id du contenu, et enfin indiquer à quelle position vous voulez que le nouveau contenu apparaisse (0 étant le premier endroit).
Syntax
AccordionObject.addSection('togglersID', 'elementsID', 2);Note- Lorsque vous ajoutez une section comme celle-ci, bien qu'elle apparaisse à l'endroit de l'index 2, l'index réel sera +1 le dernier index. Donc, si vous avez 5 éléments dans votre tableau (0-4) et que vous ajoutez un 6 ème , son index serait 5 quel que soit l'endroit où vous l'ajoutez avec .addSection ();
afficher()
Cela vous permet d'ouvrir un élément donné. Vous pouvez sélectionner l'élément par son index (donc si vous avez ajouté une paire d'éléments et que vous souhaitez l'afficher, vous aurez ici un index différent de celui que vous utiliseriez ci-dessus.
Syntax
AccordionObject.display(5); //would display the newly added elementExample
L'exemple suivant explique la fonction Accordéon avec quelques effets. Jetez un œil au code suivant.
<!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
Cliquez sur chaque section Toggle, puis vous trouverez les données cachées et les indicateurs d'événements pour chaque action.