Foundation - Référence JavaScript des info-bulles
La description
Foundation fournit des composants JavaScript pour l'info-bulle, comme indiqué ci-dessous.
Initialisation
Pour utiliser ce plugin, les fichiers foundation.core.js , foundation.tooltip.js doivent être inclus dans votre JavaScript. Ce plugin nécessite les bibliothèques utilitaires suivantes -
foundation.util.box.js
foundation.util.triggers.js
Fondation.Tooltip
Il crée une nouvelle instance d'info-bulle.
var elem = new Foundation.Tooltip(element);Il déclenche l' événement Tooltip #: init events et accepte les paramètres suivants.
| N ° Sr. | Nom et description | Type |
|---|---|---|
| 1 | element C'est l'objet jQuery utilisé pour attacher une info-bulle. |
jQuery |
| 2 | options Pour étendre la configuration par défaut, cet objet est utilisé. |
Objet |
Options de plug-in
Vous pouvez les utiliser pour personnaliser l'instance d'une info-bulle. Il peut être défini comme des attributs de données séparés, un attribut d' options de données fusionné ou comme un objet passé au constructeur du plugin. Le tableau suivant répertorie les options de plug-in utilisées dans Foundation.
| N ° Sr. | Nom et description | Exemple |
|---|---|---|
| 1 | hoverDelay Il représente le temps en ms, à prendre avant qu'une info-bulle ne s'ouvre au survol. |
200 |
| 2 | fadeInDuration150 Il représente le temps de se fondre dans la vue. |
150 |
| 3 | fadeOutDuration Cela représente le temps de disparaître de la vue. |
150 |
| 4 | disableHover Il empêche les événements de survol d'ouvrir l'info-bulle lorsqu'il est défini sur true. |
faux |
| 5 | templateClasses Classes supplémentaires à appliquer au modèle d'info-bulle, ce qui est facultatif. |
'ma-classe-astuce-cool' |
| 6 | tooltipClass Classe non facultative ajoutée aux modèles de l'info-bulle. |
'info-bulle' |
| sept | triggerClass Classe appliquée à l'élément d'ancrage de l'info-bulle. |
'a-pourboire' |
| 8 | showOn Taille minimale du point d'arrêt auquel ouvrir l'info-bulle. |
'petit' |
| 9 | template Modèle personnalisé à utiliser pour créer un balisage d'info-bulle. |
'' |
| dix | tipText Texte affiché dans le modèle d'info-bulle à l'ouverture. |
«Un fait intéressant sur l'espace ici. |
| 11 | clickOpen Il ouvre l'info-bulle lorsqu'il est déclenché avec un événement clic ou tactile. |
vrai |
| 12 | positionClass Classes supplémentaires pour le positionnement, définies par JS. |
'Haut' |
| 13 | vOffset Il représente la distance (pixels) à laquelle le modèle doit pousser depuis l'ancre sur l'axe Y. |
dix |
| 14 | hOffset Il représente la distance (pixels) à laquelle le modèle doit pousser depuis l'ancre sur l'axe X, lorsqu'il est aligné sur le côté. |
12 |
Événements
Ces événements seront déclenchés à partir de n'importe quel élément avec le plugin des info-bulles attaché. Le tableau suivant répertorie les événements avec une brève description.
| N ° Sr. | Nom et description |
|---|---|
| 1 | tooltip.zf.tooltips Déclenche pour fermer toutes les autres info-bulles ouvertes sur la page. |
| 2 | show.zf.tooltips Se déclenche lorsque l'info-bulle est affichée. |
| 3 | hide.zf.tooltips Se déclenche lorsque l'info-bulle est masquée. |
Les fonctions
.spectacle
Il révèle l'info-bulle et déclenche un événement pour fermer une autre info-bulle. Il déclenche l' événement Closeme #: tooltip Tooltip # event: show events.
.cacher
Il masque l'info-bulle actuelle et réinitialise la classe de positionnement lorsqu'elle change en raison de la collision. Il déclenche l' événement Tooltip #: masquer les événements.
.basculer
En plus des fonctions statiques show () et hide (), .toggle ajoute une méthode toggle.
.détruire
Il détruit une instance d'info-bulle et l'élément de modèle est supprimé de la vue.