JqueryUI - Accordéon
Accordion Widget dans jQueryUI est un support de contenu extensible et pliable basé sur jQuery qui est divisé en sections et ressemble probablement à des onglets. jQueryUI fournit la méthode accordéon () pour y parvenir.
Syntaxe
le accordion() La méthode peut être utilisée sous deux formes -
$ (selector, context) .accordion (options), méthode
$ (selector, context) .accordion ("action", params) Méthode
$ (selector, context) .accordion (options), méthode
La méthode accordéon (options) déclare qu'un élément HTML et son contenu doivent être traités et gérés comme des menus accordéon. Le paramètre options est un objet qui spécifie l'apparence et le comportement du menu concerné.
Syntaxe
$(selector, context).accordion (options);Vous pouvez fournir une ou plusieurs options à la fois en utilisant un objet Javascript. S'il y a plus d'une option à fournir, vous les séparerez en utilisant une virgule comme suit -
$(selector, context).accordion({option1: value1, option2: value2..... });Le tableau suivant répertorie les différentes options pouvant être utilisées avec cette méthode -
| Sr.No. | Option et description |
|---|---|
| 1 | actif Indique l'index du menu qui est ouvert lors du premier accès à la page. Par défaut, sa valeur est0, c'est à dire le premier menu. Option - active Indique l'index du menu qui est ouvert lors du premier accès à la page. Par défaut, sa valeur est0, c'est à dire le premier menu. Cela peut être de type -
Syntax |
| 2 | animer Cette option est utilisée pour définir comment animer les panneaux changeants. Par défaut, sa valeur est{}. Option - animate Cette option est utilisée pour définir comment animer les panneaux changeants. Par défaut, sa valeur est{}. Cela peut être de type -
Syntax |
| 3 | pliant Cette option, lorsqu'elle est définie sur true , permet aux utilisateurs de fermer un menu en cliquant dessus. Par défaut, les clics sur l'en-tête du panneau ouvert n'ont aucun effet. Par défaut, sa valeur estfalse. Option - collapsible Cette option, lorsqu'elle est définie sur true , permet aux utilisateurs de fermer un menu en cliquant dessus. Par défaut, les clics sur l'en-tête du panneau ouvert n'ont aucun effet. Par défaut, sa valeur estfalse. Syntax |
| 4 | désactivée Cette option, lorsqu'elle est définie sur true, désactive l'accordéon. Par défaut, sa valeur estfalse. Option - disabled Cette option, lorsqu'elle est définie sur true, désactive l'accordéon. Par défaut, sa valeur estfalse. Syntax |
| 5 | un événement Cette option spécifie l'événement utilisé pour sélectionner un en-tête d'accordéon. Par défaut, sa valeur estclick. Option - event Cette option spécifie l'événement utilisé pour sélectionner un en-tête d'accordéon. Par défaut, sa valeur estclick. Syntax |
| 6 | entête Cette option spécifie un sélecteur ou un élément pour remplacer le modèle par défaut pour identifier les éléments d'en-tête. Par défaut, sa valeur est> li > :first-child,> :not(li):even. Option - header Cette option spécifie un sélecteur ou un élément pour remplacer le modèle par défaut pour identifier les éléments d'en-tête. Par défaut, sa valeur est> li > :first-child,> :not(li):even. Syntax |
| sept | hauteurStyle Cette option est utilisée pour contrôler la hauteur de l'accordéon et des panneaux. Par défaut, sa valeur estauto. Option - heightStyle Cette option est utilisée pour contrôler la hauteur de l'accordéon et des panneaux. Par défaut, sa valeur estauto. Les valeurs possibles sont -
Syntax |
| 8 | Icônes Cette option est un objet qui définit les icônes à utiliser à gauche du texte d'en-tête pour les panneaux ouverts et fermés. L'icône à utiliser pour les panneaux fermés est spécifiée en tant que propriété nommée header , tandis que l'icône à utiliser pour les panneaux ouverts est spécifiée en tant que propriété nommée headerSelected . Par défaut, sa valeur est{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }. Option - icons Cette option est un objet qui définit les icônes à utiliser à gauche du texte d'en-tête pour les panneaux ouverts et fermés. L'icône à utiliser pour les panneaux fermés est spécifiée en tant que propriété nommée header , tandis que l'icône à utiliser pour les panneaux ouverts est spécifiée en tant que propriété nommée headerSelected . Par défaut, sa valeur est{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }. Syntax |
La section suivante vous montrera quelques exemples fonctionnels de fonctionnalité de widget accordéon.
Fonctionnalité par défaut
L'exemple suivant montre un exemple simple de fonctionnalité de widget accordéon, en ne passant aucun paramètre au accordion() méthode.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion-1" ).accordion();
});
</script>
<style>
#accordion-1{font-size: 14px;}
</style>
</head>
<body>
<div id = "accordion-1">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</body>
</html>Sauvegardons le code ci-dessus dans un fichier HTML accordionexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -
Cliquez sur les en-têtes (onglet 1, onglet 2, onglet 3) pour développer / réduire le contenu qui est divisé en sections logiques, un peu comme des onglets.
Utilisation de pliable
L'exemple suivant illustre l'utilisation de trois options collapsible dans le widget accordéon de JqueryUI.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion-2" ).accordion({
collapsible: true
});
});
</script>
<style>
#accordion-2{font-size: 14px;}
</style>
</head>
<body>
<div id = "accordion-2">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
</body>
</html>Sauvegardons le code ci-dessus dans un fichier HTML accordionexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -
Ici, nous avons défini pliable sur true . Cliquez sur un en-tête d'accordéon, cela permet de réduire la section active.
Utilisation de heightStyle
L'exemple suivant illustre l'utilisation de trois options heightStyle dans le widget accordéon de JqueryUI.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion-3" ).accordion({
heightStyle: "content"
});
$( "#accordion-4" ).accordion({
heightStyle: "fill"
});
});
</script>
<style>
#accordion-3, #accordion-4{font-size: 14px;}
</style>
</head>
<body>
<h3>Height style-content</h3>
<div style = "height:250px">
<div id = "accordion-3">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
<li>List item five</li>
</ul>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
</div>
</div>
</div><br><br>
<h3>Height style-Fill</h3>
<div style = "height:250px">
<div id = "accordion-4">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
<li>List item five</li>
</ul>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</p>
</div>
</div>
</div>
</body>
</html>Sauvegardons le code ci-dessus dans un fichier HTML accordionexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -
Ici, nous avons deux accordéons, le premier a l' option heightStyle définie sur content , ce qui permet aux panneaux d'accordéon de conserver leur hauteur native. Le deuxième accordéon a l' option heightStyle définie sur fill , le script définira automatiquement les dimensions de l'accordéon à la hauteur de son conteneur parent.
$ (selector, context) .accordion ("action", params) Méthode
La méthode accordéon ("action", params) peut effectuer une action sur des éléments d'accordéon, comme sélectionner / désélectionner le menu accordéon. L'action est spécifiée sous forme de chaîne dans le premier argument (par exemple, "désactiver" désactive tous les menus). Découvrez les actions qui peuvent être passées, dans le tableau suivant.
Syntaxe
$(selector, context).accordion ("action", params);;Le tableau suivant répertorie les différentes actions pouvant être utilisées avec cette méthode -
| Sr.No. | Action et description |
|---|---|
| 1 | détruire Cette action détruit complètement la fonctionnalité d'accordéon d'un élément. Les éléments reviennent à leur état pré-init. Action - destroy Cette action détruit complètement la fonctionnalité d'accordéon d'un élément. Les éléments reviennent à leur état pré-init. Syntax |
| 2 | désactiver Cette action désactive tous les menus. Aucun clic ne sera pris en compte. Cette méthode n'accepte aucun argument. Action - disable Cette action désactive tous les menus. Aucun clic ne sera pris en compte. Cette méthode n'accepte aucun argument. Syntax |
| 3 | activer Cette action réactive tous les menus. Les clics sont à nouveau considérés. Cette méthode n'accepte aucun argument. Action - enable Cette action réactive tous les menus. Les clics sont à nouveau considérés. Cette méthode n'accepte aucun argument. Syntax |
| 4 | option (optionName) Cette action obtient la valeur de l'élément d'accordéon actuellement associé avec le nom d' option spécifié . Cela prend une valeur String comme argument. Action - option( optionName ) Cette action obtient la valeur de l'élément d'accordéon actuellement associé avec le nom d' option spécifié . Cela prend une valeur String comme argument. Syntax |
| 5 | option Cette action obtient un objet contenant des paires clé / valeur représentant le hachage d'options d'accordéon actuel. Action - option Cette action obtient un objet contenant des paires clé / valeur représentant le hachage d'options d'accordéon actuel. Syntax |
| 6 | option (optionName, valeur) Cette action définit la valeur de l'option d'accordéon associée au nom d'option spécifié. Action - option( optionName, value ) Cette action définit la valeur de l'option d'accordéon associée au nom d'option spécifié. Syntax |
| sept | option (options) Cette action définit une ou plusieurs options pour l'accordéon. Action - option( options ) Cette action définit une ou plusieurs options pour l'accordéon. Où options est une carte de paires option-valeur à définir. Syntax |
| 8 | rafraîchir Cette action traite tous les en-têtes et panneaux qui ont été ajoutés ou supprimés directement dans le DOM. Il recalcule ensuite la hauteur des panneaux d'accordéon. Les résultats dépendent du contenu et de l'option heightStyle. Cette méthode n'accepte aucun argument. Action - refresh Cette action traite tous les en-têtes et panneaux qui ont été ajoutés ou supprimés directement dans le DOM. Il recalcule ensuite la hauteur des panneaux d'accordéon. Les résultats dépendent du contenu et de l'option heightStyle. Cette méthode n'accepte aucun argument. Syntax |
| 9 | widget Cette action renvoie l'élément de widget accordéon; celui annoté avec le nom de la classe ui-accordéon . Action - widget Cette action renvoie l'élément de widget accordéon; celui annoté avec le nom de la classe ui-accordéon . Syntax |
Exemple
Voyons maintenant un exemple utilisant les actions du tableau ci-dessus. L'exemple suivant illustre l'utilisation de la méthode option (optionName, value) .
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion-5" ).accordion({
disabled: false
});
$("input").each(function () {
$(this).change(function () {
if ($(this).attr("id") == "disableaccordion") {
$("#accordion-5").accordion("option", "disabled", true);
} else {
$("#accordion-5").accordion("option", "disabled", false);
}
});
});
});
</script>
<style>
#accordion-5{font-size: 14px;}
</style>
</head>
<body>
<div id = "accordion-5">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
<div style = "margin-top:30px">
<input type = "radio" name = "disable" id = "disableaccordion"
value = "disable">Disable accordion
<input type = "radio" name = "disable" id = "enableaccordion" checked
value = "enable">Enable accordion
</div>
</body>
</html>Sauvegardons le code ci-dessus dans un fichier HTML accordionexample.htm et ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante -
Ici, nous démontrons l'activation et la désactivation des accordéons. Sélectionnez les boutons radio respectifs pour vérifier chaque action.
Gestion d'événements sur les éléments d'accordéon
En plus de la méthode accordéon (options) que nous avons vue dans les sections précédentes, JqueryUI fournit des méthodes d'événement qui se déclenchent pour un événement particulier. Ces méthodes d'événement sont répertoriées ci-dessous -
| Sr.No. | Méthode d'événement et description |
|---|---|
| 1 | activer (événement, ui) Cet événement est déclenché lorsqu'un menu est activé. Cet événement n'est déclenché que lors de l'activation du panneau, il n'est pas déclenché pour le panneau initial lorsque le widget accordéon est créé. Event - activate(event, ui) Cet événement est déclenché lorsqu'un menu est activé. Cet événement n'est déclenché que lors de l'activation du panneau, il n'est pas déclenché pour le panneau initial lorsque le widget accordéon est créé. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont -
Syntax |
| 2 | beforeActivate (événement, interface utilisateur) Cet événement est déclenché avant l'activation d'un panneau. Cet événement peut être annulé pour empêcher le panneau de s'activer. Event - beforeActivate(event, ui) Cet événement est déclenché avant l'activation d'un panneau. Cet événement peut être annulé pour empêcher le panneau de s'activer. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont -
Syntax |
| 3 | create (événement, interface utilisateur) Cet événement est déclenché lors de la création de l'accordéon. Event - create(event, ui) Cet événement est déclenché lors de la création de l'accordéon. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont -
Syntax |
Exemple
L'exemple suivant illustre l'utilisation de la méthode événementielle dans les widgets d'accordéon. Cet exemple illustre l'utilisation des événements create , beforeActive et active .
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion-6" ).accordion({
create: function (event, ui) {
$("span#result").html ($("span#result").html () +
"<b>Created</b><br>");
},
beforeActivate : function (event, ui) {
$("span#result").html ($("span#result").html () +
", <b>beforeActivate</b><br>");
},
activate: function (event, ui) {
$("span#result").html ($("span#result").html () +
"<b>activate</b><br>");
}
});
});
</script>
<style>
#accordion-6{font-size: 14px;}
</style>
</head>
<body>
<div id = "accordion-6">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
<hr />
<span id = result></span>
</body>
</html>Sauvegardons le code ci-dessus dans un fichier HTML accordionexample.htm et ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante -
Ici, nous affichons un texte en bas, basé sur les événements.