Fondation curseur
Fondation curseur permet à l'utilisateur de sélectionner la plage de valeurs en faisant glisser:
Curseur en utilisant <div class="range-slider" data-slider> " data-slider> Créer. Dans le <div> à l' intérieur, ajoutez deux <span> élément: <span class="range-slider-handle"> Créer un curseur rectangulaire (fond bleu), <span class="range-slider-active-segment"> dans la barre grise curseur après la zone du curseur.
Remarque: Le curseur nécessite JavaScript. Donc, vous devez initialiser fondationcanadiennede JS:
Exemples
<Span class = "range-slider -Handle"> </ span>
<Span class = "range-curseur -Active-segment"> </ span>
</ Div>
<! - Initialisation Fondation JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Essayez »
Fillet et curseur désactiver
Utilisez .radius et .round classes pour ajouter des coins arrondis curseur. Utilisez .disabled classe pour désactiver le curseur:
Exemples
<Class Div = "range-curseur rayon" data-curseur> ... </ div>
<Class Div = "range-curseur rond" data-curseur> ... </ div>
<Class Div = "range-curseur désactivé" data-curseur> ... </ div>
Essayez »
curseur vertical
Utilisez .vertical-range des classes et des data-options="vertical: true;" ;" pour créer un curseur vertical:
Exemples
<Span class = "range-slider -Handle"> </ span>
<Span class = "range-curseur -Active-segment"> </ span>
</ Div>
Essayez »
valeur curseur
Par défaut, la barre de défilement au milieu (d'une valeur de "50"). Vous pouvez ajouter des data-options="initial: num " " pour modifier la valeur par défaut de la propriété:
Exemples
<Span class = "range-slider -Handle"> </ span>
<Span class = "range-curseur -Active-segment"> </ span>
</ Div>
Essayez »
Affichage de la valeur du curseur
Si nous avons besoin de faire glisser la valeur du curseur lorsque l'affichage en temps réel, peut être obtenu par <div> Ajoutez le data-options="display_selector:# id " id correspond à l'attribut id et la valeur de l'élément coulissant, à titre d' exemples:
Exemples
<Span id = "mySlider"> </ span>
<Class Div = "range-curseur " data-glisseur data-options = "display_selector: #mySlider;">
<Span class = "range-slider -Handle"> </ span>
<Span class = "range-curseur -Active-segment"> </ span>
</ Div>
Essayez »
Combinaison des options de données
L'exemple suivant utilise display_selector et initial options de données:
Exemples
<Class Div = "range-slider " data-glisseur data-options = "display_selector: #mySlider; initial: 20;">
<Span class = "range-slider -Handle"> </ span>
<Span class = "range-curseur -Active-segment"> </ span>
</ Div>
Essayez »
Étape? Long
Par défaut, le curseur est déplacé pour réduire l'augmentation du nombre «1» Vous pouvez ajouter des data-options="step: num ;" ;" attribut pour modifier la valeur de l' étape ?. Exemple 25 est fixé à:
Exemples
<Class Div = "range-curseur " data-glisseur data-options = "display_selector: #mySlider; étape: 25;">
<Span class = "range-slider -Handle"> </ span>
<Span class = "range-curseur -Active-segment"> </ span>
</ Div>
Essayez »
intervalle de mesure
Par défaut, la valeur de l'ordre de "0" à "100" Vous pouvez ajouter-options données start et end pour définir les valeurs d' intervalle. Les exemples suivants définissent la valeur de l'intervalle de "1" à "20":
Exemples
<Class = "Div range-curseur " data-glisseur data-options = "display_selector: #mySlider; start: 1; fin: 20;">
<Span class = "range-slider -Handle"> </ span>
<Span class = "range-curseur -Active-segment"> </ span>
</ Div>
Essayez »
Utilisation de la grille
Utilisez ce qui suit pour utiliser le curseur dans la grille:
Exemples
<Class Div = "small-10 colonnes">
<Class Div = "range-curseur " data-glisseur data-options = "display_selector: #mySlider;">
<Span class = "range-slider -Handle"> </ span>
<Span class = "range-curseur -Active-segment"> </ span>
</ Div>
</ Div>
<Class Div = "small-2 colonnes">
<! - L'élément d'affichage (Astuce : utiliser CSS pour positionner parfaitement ce) ->
<Span id = style "mySlider" = "display: block; margin-top: 14px;"> </ span>
</ Div>
</ Div>
Essayez »
Utilisation de la saisie
L'exemple suivant utilise la <input> remplacer <span> pour afficher la valeur du curseur:
Exemples
<Class Div = "small-10 colonnes">
<Class Div = "range-slider " data-glisseur data-options = "display_selector: #mySlider; initial: 72;">
<Span class = "range-slider -Handle"> </ span>
<Span class = "range-curseur -Active-segment"> </ span>
</ Div>
</ Div>
<Class Div = "small-2 colonnes">
<! - L'élément d'affichage (Astuce : utiliser CSS pour positionner parfaitement ce) ->
<Input type = "nombre" id = style "mySlider" = "margin-top: 7px;" value = "72">
</ Div>
</ Div>
Essayez »