Foundation - Référence Media JavaScript
La description
Foundation fournit des composants JavaScript pour l'orbite comme indiqué ci-dessous.
Initialisation
Pour utiliser le plugin orbit, les fichiers foundation.core.js , foundation.orbit.js doivent être inclus dans votre JavaScript. Ce plugin nécessite les bibliothèques utilitaires suivantes -
foundation.util.keyboard.js
foundation.util.motion.js
foundation.util.timerAndImageLoader.js
foundation.util.touch.js
Fondation.Orbit
Il est utilisé pour créer une nouvelle instance d'un carrousel de l'orbite.
var elem = new Foundation.Orbit(element);| N ° Sr. | Nom et description | Type |
|---|---|---|
| 1 | element C'est un objet jQuery à transformer en carrousel. |
jQuery |
| 2 | options Il remplace les paramètres par défaut du plugin. |
Objet |
Options de plug-in
Vous pouvez les utiliser pour personnaliser l'instance d'une orbite. 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 | bullets Il dit au JS de charger des puces. |
vrai |
| 2 | navButtons Il indique au JS d'ajouter des écouteurs d'événements aux boutons de navigation. |
vrai |
| 3 | animInFromRight classe d'animation motion-ui à appliquer. |
"slide-in-right" |
| 4 | animOutToRight classe d'animation motion-ui à appliquer. |
'slide-out-right' |
| 5 | animInFromLeft classe d'animation motion-ui à appliquer. |
"glisser vers la gauche" |
| 6 | animOutToLeft classe d'animation motion-ui à appliquer. |
"glisser vers la gauche" |
| sept | autoPlay Il permet automatiquement à orbite de s'animer au chargement de la page. |
vrai |
| 8 | timerDelay Il représente le temps en ms qui sera appliqué pour la transition de diapositive. |
5000 |
| 9 | infiniteWrap Il boucle à l'infini via des diapositives |
vrai |
| dix | swipe Il permet aux diapositives orbitales de lier les événements de balayage pour mobile. |
vrai |
| 11 | pauseOnHover Il permet aux fonctions de minutage de mettre en pause l'animation en survolant celle-ci. |
vrai |
| 12 | accessible Il lie les événements du clavier au curseur. |
vrai |
| 13 | containerClass Classe appliquée au conteneur de l'orbite. |
'orbite-conteneur' |
| 14 | slideClass Classe appliquée à des diapositives individuelles de l'orbite. |
'orbite-toboggan' |
| 15 | boxOfBullets Classe appliquée au conteneur de la balle. |
'orbite-balles' |
| 16 | nextClass Classe appliquée au bouton suivant. |
'orbite-suivant' |
| 17 | prevClass Classe appliquée au bouton précédent |
'orbite-précédente' |
| 18 | useMUI Il définit Boolean pour marquer le JS pour utiliser ou non les classes motion ui. Pour la rétrocompatibilité, la valeur par défaut est true. |
vrai |
Événements
Ces événements se déclencheront à partir de n'importe quel élément avec un plugin attaché. Le slidechange.zf.orbit se déclenchera lorsque l'animation sera terminée par la diapositive.
Les fonctions
Le .geoSync définit un objet de minuterie et démarre le compteur de la diapositive suivante.
.changeSlide
Cela change la diapositive en une nouvelle. Il déclenche les événements Orbit # pour le changement de diapositive. Le tableau suivant répertorie les événements qui seront déclenchés.
| N ° Sr. | Nom et description | Type |
|---|---|---|
| 1 | isLTR Il signale quand la diapositive doit se déplacer de gauche à droite. |
Booléen |
| 2 | chosenSlide jQuery éléments de la diapositive à afficher ensuite, quand l'un est sélectionné. |
jQuery |
| 3 | idx Il représente le nouvel index des diapositives de sa collection, lorsque celui-ci est choisi. |
Nombre |
Le .destroy détruit le carrousel et masque l'élément.