Foundation - Référence JavaScript pour l'exploration descendante
Foundation fournit des composants JavaScript pour un menu détaillé comme indiqué ci-dessous.
Initialisation
Vous pouvez initialiser le menu d'exploration en JavaScript à l'aide des plugins foundation.drilldown.js et foundation.core.js . Le plugin nécessite les bibliothèques suivantes -
foundation.util.keyboard.js
foundation.util.motion.js
foundation.util.nest.js
Fondation.
Il spécifie une instance d'un menu d'exploration comme défini ci-dessous -
var elem = new Foundation.Drilldown(element);| N ° Sr. | Nom et description | Type |
|---|---|---|
| 1 | element Il crée un objet jQuery dans un menu détaillé. |
jQuery |
| 2 | options Le paramètre par défaut du plug-in est remplacé. |
Objet |
Options de plug-in
Vous pouvez utiliser le plug-in suivant pour personnaliser l'instance du menu d'exploration. Vous pouvez définir l'option du plugin en tant qu'attributs de données individuels.
| N ° Sr. | Nom et description | Exemple |
|---|---|---|
| 1 | backButton La classe js-drilldown-back est requise. Pour le bouton de retour généré par JS, le balisage est utilisé. |
|
| 2 | wrapper La classe is-drilldown est requise pour un style indépendant. |
|
| 3 | closeOnClick En cliquant sur le corps, le menu revient à la liste racine. |
faux |
Événements
Le plugin de menus de recherche attaché à n'importe quel élément peut déclencher l'événement suivant.
| N ° Sr. | Nom et description |
|---|---|
| 1 | closed.zf.drilldown menu Il déclenche un événement lorsque le menu est complètement fermé. |
| 2 | hide.zf.drilldown menus Il déclenche un événement lorsque les sous-menus ouverts sont fermés. |
Les fonctions
Voici les fonctions utilisées dans le menu déroulant.
._cacher tout
Il ferme tous les éléments ouverts et revient au menu racine.
._retour
Dans chaque bouton de retour, l'écouteur d'événements est inclus.
| N ° Sr. | Nom et description | Type |
|---|---|---|
| 1 | $elem l' événement de retour est inclus dans le sous-menu actuel. |
jQuery |
._spectacle
Les sous-menus sont ouverts.
| N ° Sr. | Nom et description | Type |
|---|---|---|
| 1 | $elem Ouvrez les sous-menus actuels. |
jQuery |
._cacher
Le sous-menu est masqué.
| N ° Sr. | Nom et description | Type |
|---|---|---|
| 1 | $elem Masque le sous-menu actuel |
jQuery |
.détruire
Le menu détaillé est détruit.