JqueryUI - Menu
Un widget de menu se compose généralement d'une barre de menus principale avec des menus contextuels. Les éléments des menus contextuels ont souvent des sous-menus contextuels. Un menu peut être créé à l'aide des éléments de balisage tant que la relation parent-enfant est conservée (en utilisant <ul> ou <ol>). Chaque élément de menu a un élément d'ancrage.
Le widget de menu dans jQueryUI peut être utilisé pour les menus en ligne et contextuels, ou comme base pour créer des systèmes de menus plus complexes. Par exemple, vous pouvez créer des menus imbriqués avec un positionnement personnalisé.
jQueryUI fournit des méthodes menu () pour créer un menu.
Syntaxe
le menu() La méthode peut être utilisée sous deux formes -
$ (selector, context) .menu (options), méthode
$ (selector, context) .menu ("action", params) Méthode
$ (selector, context) .menu (options), méthode
La méthode menu (options) déclare qu'un élément HTML et son contenu doivent être traités et gérés comme des menus. Le paramètre options est un objet qui spécifie l'apparence et le comportement des éléments de menu impliqués.
Syntaxe
$(selector, context).menu (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).menu({option1: value1, option2: value2..... });Le tableau suivant répertorie les différentes options pouvant être utilisées avec cette méthode -
| N ° Sr. | Option et description |
|---|---|
| 1 | désactivée Cette option, si elle est définie sur true, désactive le menu. Par défaut, sa valeur estfalse. Option - disabled Cette option, si elle est définie sur true, désactive le menu. Par défaut, sa valeur estfalse. Syntax |
| 2 | Icônes Cette option définit les icônes des sous-menus. Par défaut, sa valeur est{ submenu: "ui-icon-carat-1-e" }. Option - icons Cette option définit les icônes des sous-menus. Par défaut, sa valeur est{ submenu: "ui-icon-carat-1-e" }. Syntax |
| 3 | les menus Cette option est un sélecteur pour les éléments qui servent de conteneur de menu, y compris les sous-menus. Par défaut, sa valeur estul. Option - menus Cette option est un sélecteur pour les éléments qui servent de conteneur de menu, y compris les sous-menus. Par défaut, sa valeur estul. Syntax |
| 4 | position Cette option définit la position des sous-menus par rapport à l'élément de menu parent associé. Par défaut, sa valeur est{ my: "left top", at: "right top" }. Option - position Cette option définit la position des sous-menus par rapport à l'élément de menu parent associé. Par défaut, sa valeur est{ my: "left top", at: "right top" }. Syntax |
| 5 | rôle Cette option est utilisée pour personnaliser les rôles ARIA utilisés pour le menu et les éléments de menu. Par défaut, sa valeur estmenu. Option - role Cette option est utilisée pour personnaliser les rôles ARIA utilisés pour le menu et les éléments de menu. Par défaut, sa valeur estmenu. Dans le cadre de la Web Accessibility Initiative (WAI), Accessible Rich Internet Applications Suite (ARIA), définit un moyen de rendre le contenu Web et les applications Web plus accessibles. Il est utilisé pour améliorer l'accessibilité du contenu dynamique et des contrôles d'interface utilisateur avancés développés avec Ajax, HTML, JavaScript et les technologies associées. Vous pouvez en savoir plus à ce sujet sur: ARIA Syntax |
Fonctionnalité par défaut
L'exemple suivant montre un exemple simple de fonctionnalité de widget de menu, en ne passant aucun paramètre au menu() méthode.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Menu functionality</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>
<!-- CSS -->
<style>
.ui-menu {
width: 200px;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#menu-1" ).menu();
});
</script>
</head>
<body>
<!-- HTML -->
<ul id = "menu-1">
<li><a href = "#">Spring</a></li>
<li><a href = "#">Hibernate</a></li>
<li><a href = "#">Java</a>
<ul>
<li><a href = "#">Java IO</a></li>
<li><a href = "#">Swing</a></li>
<li><a href = "#">Jaspr Reports</a></li>
</ul>
</li>
<li><a href = "#">JSF</a></li>
<li><a href = "#">HTML5</a></li>
</ul>
</body>
</html>Sauvegardons le code ci-dessus dans un fichier HTML menuexample.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 -
Dans l'exemple ci-dessus, vous pouvez voir un menu thématique avec des interactions souris et clavier pour la navigation.
Utilisation des icônes et de la position
L'exemple suivant illustre l'utilisation de deux options icons, et position dans la fonction de menu de JqueryUI.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Menu functionality</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>
<!-- CSS -->
<style>
.ui-menu {
width: 200px;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#menu-2" ).menu({
icons: { submenu: "ui-icon-circle-triangle-e"},
position: { my: "right top", at: "right-10 top+5" }
});
});
</script>
</head>
<body>
<!-- HTML -->
<ul id = "menu-2">
<li><a href = "#">Spring</a></li>
<li><a href = "#">Hibernate</a></li>
<li><a href = "#">Java</a>
<ul>
<li><a href = "#">Java IO</a></li>
<li><a href = "#">Swing</a></li>
<li><a href = "#">Jaspr Reports</a></li>
</ul>
</li>
<li><a href = "#">JSF</a></li>
<li><a href = "#">HTML5</a></li>
</ul>
</body>
</html>Sauvegardons le code ci-dessus dans un fichier HTML menuexample.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 -
Dans l'exemple ci-dessus, vous pouvez voir que nous avons appliqué une image d'icône pour la liste des sous-menus et également changé la position du sous-menu.
$ (selector, context) .menu ("action", params) Méthode
La méthode menu ("action", params) peut effectuer une action sur des éléments de menu, comme activer / désactiver le menu. L'action est spécifiée sous forme de chaîne dans le premier argument (par exemple, "désactiver" désactive le menu). Découvrez les actions qui peuvent être passées, dans le tableau suivant.
Syntaxe
$(selector, context).menu ("action", params);;Le tableau suivant répertorie les différentes actions qui peuvent être utilisées avec cette méthode -
| N ° Sr. | Action et description |
|---|---|
| 1 | flou ([événement]) Cette action supprime le focus d'un menu. Il déclenche l' événement de flou du menu en réinitialisant tout style d'élément actif. Où l' événement est de typeEvent et représente ce qui a déclenché le flou du menu. Action - blur( [event ] ) Cette action supprime le focus d'un menu. Il déclenche l' événement de flou du menu en réinitialisant tout style d'élément actif. Où l' événement est de typeEvent et représente ce qui a déclenché le flou du menu. Syntax |
| 2 | réduire ([événement]) Cette action ferme le sous-menu actuellement actif. Où l' événement est de typeEvent et représente ce qui a déclenché la fermeture du menu. Action - collapse( [event ] ) Cette action ferme le sous-menu actuellement actif. Où l' événement est de typeEvent et représente ce qui a déclenché la fermeture du menu. Syntax |
| 3 | collapseAll ([événement] [, tout]) Cette action ferme tous les sous-menus ouverts. Action - collapseAll( [event ] [, all ] ) Cette action ferme tous les sous-menus ouverts. Où -
Syntax |
| 4 | détruire() Cette action supprime complètement la fonctionnalité de menu. Cela ramènera l'élément à son état pré-init. Cette méthode n'accepte aucun argument. Action - destroy() Cette action supprime complètement la fonctionnalité de menu. Cela ramènera l'élément à son état pré-init. Cette méthode n'accepte aucun argument. Syntax |
| 5 | désactiver () Cette action désactive le menu. Cette méthode n'accepte aucun argument. Action - disable() Cette action désactive le menu. Cette méthode n'accepte aucun argument. Syntax |
| 6 | activer() Cette action active le menu. Cette méthode n'accepte aucun argument. Action - enable() Cette action active le menu. Cette méthode n'accepte aucun argument. Syntax |
| sept | développer ([événement]) Cette action ouvre le sous-menu sous l'élément actuellement actif, s'il en existe un. Où l' événement est de typeEvent et représente ce qui a déclenché l'expansion du menu. Action - expand( [event ] ) Cette action ouvre le sous-menu sous l'élément actuellement actif, s'il en existe un. Où l' événement est de typeEvent et représente ce qui a déclenché l'expansion du menu. Syntax |
| 8 | focus ([événement], élément) Cette action active un élément de menu particulier, commence à ouvrir n'importe quel sous-menu si présent et déclenche l'événement de focus du menu. Où l' événement est de typeEventet représente ce qui a déclenché la mise au point du menu. et item est un objet jQuery représentant l'élément de menu à focaliser / activer. Action - focus( [event ], item ) Cette action active un élément de menu particulier, commence à ouvrir n'importe quel sous-menu si présent et déclenche l'événement de focus du menu. Où l' événement est de typeEventet représente ce qui a déclenché la mise au point du menu. et item est un objet jQuery représentant l'élément de menu à focaliser / activer. Syntax |
| 9 | isFirstItem () Cette action renvoie une valeur booléenne , qui indique si l'élément de menu actif actuel est le premier élément de menu. Cette méthode n'accepte aucun argument. Action - isFirstItem() Cette action renvoie une valeur booléenne , qui indique si l'élément de menu actif actuel est le premier élément de menu. Cette méthode n'accepte aucun argument. Syntax |
| dix | isLastItem () Cette action renvoie une valeur booléenne , qui indique si l'élément de menu actif actuel est le dernier élément de menu. Cette méthode n'accepte aucun argument. Action - isLastItem() Cette action renvoie une valeur booléenne , qui indique si l'élément de menu actif actuel est le dernier élément de menu. Cette méthode n'accepte aucun argument. Syntax |
| 11 | prochain événement ] ) Cette action délègue l'état actif à l'élément de menu suivant. Où l' événement est de typeEvent et représente ce qui a déclenché le déplacement de l'attention. Action - next( [event ] ) Cette action délègue l'état actif à l'élément de menu suivant. Où l' événement est de typeEvent et représente ce qui a déclenché le déplacement de l'attention. Syntax |
| 12 | nextPage ([événement]) Cette action déplace l'état actif vers le premier élément de menu sous le bas d'un menu déroulant ou le dernier élément s'il n'est pas déroulant. Où l' événement est de typeEvent et représente ce qui a déclenché le déplacement de l'attention. Action - nextPage( [event ] ) Cette action déplace l'état actif vers le premier élément de menu sous le bas d'un menu déroulant ou le dernier élément s'il n'est pas déroulant. Où l' événement est de typeEvent et représente ce qui a déclenché le déplacement de l'attention. Syntax |
| 13 | option (optionName) Cette action obtient la valeur actuellement associée au nom d' option spécifié . Où optionName est de typeString et représente le nom de l'option à obtenir. Action - option( optionName ) Cette action obtient la valeur actuellement associée au nom d' option spécifié . Où optionName est de typeString et représente le nom de l'option à obtenir. Syntax |
| 14 | option() Cette action obtient un objet contenant des paires clé / valeur représentant le hachage actuel des options de menu. Action - option() Cette action obtient un objet contenant des paires clé / valeur représentant le hachage actuel des options de menu. Syntax |
| 15 | option (optionName, valeur) Cette action définit la valeur de l'option de menu associée au nom d'option spécifié. Où optionName est de typeStringet représente le nom de l'option à définir et la valeur est de type Object et représente la valeur à définir pour l'option. Action - option( optionName, value ) Cette action définit la valeur de l'option de menu associée au nom d'option spécifié. Où optionName est de typeStringet représente le nom de l'option à définir et la valeur est de type Object et représente la valeur à définir pour l'option. Syntax |
| 16 | option (options) Cette action définit une ou plusieurs options pour le menu. Où les options sont de typeObject et représente une carte des paires option-valeur à définir. Action - option( options ) Cette action définit une ou plusieurs options pour le menu. Où les options sont de typeObject et représente une carte des paires option-valeur à définir. Syntax |
| 17 | précédent ([événement]) Cette action déplace l'état actif vers l'élément de menu précédent. Où l' événement est de typeEvent et représente ce qui a déclenché le déplacement de l'attention. Action - previous( [event ] ) Cette action déplace l'état actif vers l'élément de menu précédent. Où l' événement est de typeEvent et représente ce qui a déclenché le déplacement de l'attention. Syntax |
| 18 | previousPage ([événement]) Cette action déplace l'état actif vers le premier élément de menu au-dessus du haut d'un menu déroulant ou le premier élément s'il n'est pas déroulant. Où l' événement est de typeEvent et représente ce qui a déclenché le déplacement de l'attention. Action - previousPage( [event ] ) Cette action déplace l'état actif vers le premier élément de menu au-dessus du haut d'un menu déroulant ou le premier élément s'il n'est pas déroulant. Où l' événement est de typeEvent et représente ce qui a déclenché le déplacement de l'attention. Syntax |
| 19 | rafraîchir() Cette action initialise les sous-menus et les éléments de menu qui n'ont pas encore été initialisés. Cette méthode n'accepte aucun argument. Action - refresh() Cette action initialise les sous-menus et les éléments de menu qui n'ont pas encore été initialisés. Cette méthode n'accepte aucun argument. Syntax |
| 20 | sélectionnez ([événement]) Cette action sélectionne l'élément de menu actuellement actif, réduit tous les sous-menus et déclenche l'événement de sélection du menu. Où l' événement est de typeEvent et représente ce qui a déclenché la sélection. Action - select( [event ] ) Cette action sélectionne l'élément de menu actuellement actif, réduit tous les sous-menus et déclenche l'événement de sélection du menu. Où l' événement est de typeEvent et représente ce qui a déclenché la sélection. Syntax |
| 21 | widget () Cette action renvoie un objet jQuery contenant le menu. Cette méthode n'accepte aucun argument. Action - widget() Cette action renvoie un objet jQuery contenant le menu. Cette méthode n'accepte aucun argument. Syntax |
Les exemples suivants montrent comment utiliser les actions indiquées dans le tableau ci-dessus.
Utilisation de la méthode de désactivation
L'exemple suivant illustre l'utilisation de la méthode disable () .
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Menu functionality</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>
<!-- CSS -->
<style>
.ui-menu {
width: 200px;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#menu-3" ).menu();
$( "#menu-3" ).menu("disable");
});
</script>
</head>
<body>
<!-- HTML -->
<ul id = "menu-3">
<li><a href = "#">Spring</a></li>
<li><a href = "#">Hibernate</a></li>
<li><a href = "#">Java</a>
<ul>
<li><a href = "#">Java IO</a></li>
<li><a href = "#">Swing</a></li>
<li><a href = "#">Jaspr Reports</a></li>
</ul>
</li>
<li><a href = "#">JSF</a></li>
<li><a href = "#">HTML5</a></li>
</ul>
</body>
</html>Sauvegardons le code ci-dessus dans un fichier HTML menuexample.htm et ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante -
Dans l'exemple ci-dessus, vous pouvez voir que le menu est désactivé.
Utilisation de focus et collapseToutes les méthodes
L'exemple suivant illustre l'utilisation des méthodes focus () et collapseAll .
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Menu functionality</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>
<!-- CSS -->
<style>
.ui-menu {
width: 200px;
}
</style>
<!-- Javascript -->
<script>
$(function() {
var menu = $("#menu-4").menu();
$( "#menu-4" ).menu(
"focus", null, $( "#menu-4" ).menu().find( ".ui-menu-item:last" ));
$(menu).mouseleave(function () {
menu.menu('collapseAll');
});
});
</script>
</head>
<body>
<!-- HTML -->
<ul id = "menu-4">
<li><a href = "#">Spring</a></li>
<li><a href = "#">Hibernate</a></li>
<li><a href = "#">JSF</a></li>
<li><a href = "#">HTML5</a></li>
<li><a href = "#">Java</a>
<ul>
<li><a href = "#">Java IO</a></li>
<li><a href = "#">Swing</a></li>
<li><a href = "#">Jaspr Reports</a></li>
</ul>
</li>
</ul>
</body>
</html>Sauvegardons le code ci-dessus dans un fichier HTML menuexample.htm et ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante -
Dans l'exemple ci-dessus, vous pouvez voir que le focus est sur le dernier élément de menu. Développez maintenant le sous-menu et lorsque la souris quitte le sous-menu, le sous-menu se ferme.
Gestion des événements sur les éléments de menu
En plus de la méthode menu (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 -
| N ° Sr. | Méthode d'événement et description |
|---|---|
| 1 | flou (événement, interface utilisateur) Cet événement est déclenché lorsqu'un menu perd le focus. Event - blur(event, ui) Cet événement est déclenché lorsqu'un menu perd le focus. Où event est de type Event et ui est de type Object et représente l'élément de menu actuellement actif. Syntax |
| 2 | create (événement, interface utilisateur) Cet événement est déclenché lors de la création d'un menu. Event - create(event, ui) Cet événement est déclenché lors de la création d'un menu. Où event est de type Event et ui est de type Object . Syntax |
| 3 | focus (événement, interface utilisateur) Cet événement est déclenché lorsqu'un menu obtient le focus ou lorsqu'un élément de menu est activé. Event - focus(event, ui) Cet événement est déclenché lorsqu'un menu obtient le focus ou lorsqu'un élément de menu est activé. Où event est de type Event et ui est de type Object et représente l'élément de menu actuellement actif. Syntax |
| 4 | sélectionnez (événement, ui) Cet événement est déclenché lorsqu'un élément de menu est sélectionné. Event - select(event, ui) Cet événement est déclenché lorsqu'un élément de menu est sélectionné. Où event est de type Event et ui est de type Object et représente l'élément de menu actuellement actif. Syntax |
Exemple
L'exemple suivant illustre l'utilisation de la méthode d'événement pour la fonctionnalité de widget de menu. Cet exemple illustre l'utilisation de la création d' événements , du flou et de la mise au point .
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Menu functionality</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>
<!-- CSS -->
<style>
.ui-menu {
width: 200px;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#menu-5" ).menu({
create: function( event, ui ) {
var result = $( "#result" );
result.append( "Create event<br>" );
},
blur: function( event, ui ) {
var result = $( "#result" );
result.append( "Blur event<br>" );
},
focus: function( event, ui ) {
var result = $( "#result" );
result.append( "focus event<br>" );
}
});
});
</script>
</head>
<body>
<!-- HTML -->
<ul id = "menu-5">
<li><a href = "#">Spring</a></li>
<li><a href = "#">Hibernate</a></li>
<li><a href = "#">JSF</a></li>
<li><a href = "#">HTML5</a></li>
<li><a href = "#">Java</a>
<ul>
<li><a href = "#">Java IO</a></li>
<li><a href = "#">Swing</a></li>
<li><a href = "#">Jaspr Reports</a></li>
</ul>
</li>
</ul>
<span id = "result"></span>
</body>
</html>Sauvegardons le code ci-dessus dans un fichier HTML menuexample.htm et ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante -
Dans l'exemple ci-dessus, nous imprimons les messages en fonction des événements déclenchés.