Foundation - Référence JavaScript Slider
La description
Foundation fournit des composants JavaScript pour les curseurs.
Initialisation
En plus du plugin foundation.core.js , vous devez inclure foundation.slider.js dans votre JavaScript pour utiliser ce plugin. Ce plugin nécessite les bibliothèques d'utilitaires répertoriées ci-dessous.
foundation.util.motion.js
foundation.util.triggers.js
foundation.util.keyboard.js
foundation.util.touch.js
Fondation.Slider
Il est utilisé pour créer une nouvelle instance d'un menu d'exploration.
var elem = new Foundation.Slider(element);Le tableau suivant répertorie les paramètres utilisés par Foundation.slider .
| N ° Sr. | Nom et description | Type |
|---|---|---|
| 1 |
element L'objet jQuery est utilisé pour devenir un menu accordéon. |
jQuery |
| 2 |
options Remplace les paramètres par défaut du plugin. |
Objet |
Options de plug-in
Pour personnaliser une instance de curseur, les options de plug-in peuvent être utilisées. Ces options peuvent être définies comme un objet passé au constructeur du plugin, des attributs de données individuels ou un attribut combiné d' options de données . Le tableau suivant montre comment initialiser les plugins JavaScript.
| N ° Sr. | Nom et description | Exemple |
|---|---|---|
| 1 |
start Valeur minimale de l'échelle du curseur. |
0 |
| 2 |
end Valeur maximale de l'échelle du curseur. |
100 |
| 3 |
step Il représente le changement de valeur minimum par événement de changement. Non mis en œuvre actuellement. |
|
| 4 |
initialStart Valeur à laquelle la poignée gauche / première entrée doit être définie à l'initialisation. |
0 |
| 5 |
initialEnd Valeur à laquelle la poignée droite / seconde entrée doit être définie à l'initialisation. |
100 |
| 6 |
binding Il permet à l'entrée d'être placée à l'extérieur du conteneur et visible. |
faux |
| sept |
clickSelect Il vous permet de cliquer ou de taper sur la barre de défilement pour choisir une valeur. |
vrai |
| 8 |
vertical Lorsqu'il est défini sur true et utiliser la classe verticale , vous pouvez modifier l'alignement vertical. |
faux |
| 9 |
draggable Vous permet de faire glisser la (les) poignée (s) du curseur pour choisir une valeur. |
vrai |
| dix |
disabled Empêche l'application des écouteurs d'événements et désactive le curseur. Vérification croisée par JS avec «disabledClass». |
faux |
| 11 |
doubleSided Il permet l'utilisation de deux poignées et croisées vérifiées par le JS. |
faux |
| 12 |
decimal Représente le nombre de décimales que le plugin doit utiliser pour une précision en virgule flottante. |
2 |
| 13 |
moveTime C'est le moment d'animer le mouvement d'une poignée de curseur lorsque l'utilisateur clique sur la barre. Si vous mettez à jour le temps de transition dans les paramètres Sass, il doit être défini manuellement. |
200 |
| 14 |
disabledClass Utilisé pour désactiver le curseur |
'désactivée' |
Événements
Ces événements se déclenchent à partir de n'importe quel élément avec un plugin Slider attaché. Le move.zf.slider se déclenche lorsque le mouvement de la poignée est terminé.
Les fonctions
Le .destroy est utilisé pour détruire le plugin slider.