cursore Fondazione
cursore Foundation consente all'utente di selezionare l'intervallo di valori mediante trascinamento:
Slider utilizzando <div class="range-slider" data-slider> " dati-cursore> Crea. Nel <div> all'interno, aggiungere due <span> elemento: <span class="range-slider-handle"> Crea un cursore rettangolare (sfondo blu), <span class="range-slider-active-segment"> nel cursore barra grigia dopo l'area di scorrimento.
Nota: Il cursore richiede JavaScript. Quindi è necessario inizializzare OUNDATION JS:
Esempi
<Span class = "gamma-cursore Maniglia a"> </ span>
<Span class = "gamma-cursore -Active-segmento"> </ span>
</ Div>
<! - Inizializzazione Fondazione JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Prova »
Raccordo e cursore disabilita
Utilizzare .radius e .round classi di aggiungere angoli arrotondati cursore. Utilizzare .disabled classe per disattivare il dispositivo di scorrimento:
Esempi
<Div class = "gamma-cursore raggio" dati-cursore> ... </ div>
<Div class = "gamma-cursore rotonda" data-cursore> ... </ div>
<Div class = "gamma-cursore disabilitato" data-cursore> ... </ div>
Prova »
dispositivo di scorrimento verticale
Utilizzare .vertical-range classi e data-options="vertical: true;" ," per creare un cursore verticale:
Esempi
<Span class = "gamma-cursore Maniglia a"> </ span>
<Span class = "gamma-cursore -Active-segmento"> </ span>
</ Div>
Prova »
valore del cursore
Per impostazione predefinita, la barra di scorrimento nel mezzo di (un valore di "50"). È possibile aggiungere data-options="initial: num " " per modificare il valore predefinito della proprietà:
Esempi
<Span class = "gamma-cursore Maniglia a"> </ span>
<Span class = "gamma-cursore -Active-segmento"> </ span>
</ Div>
Prova »
valore del cursore di visualizzazione
Se abbiamo bisogno di trascinare il valore del cursore quando la visualizzazione in tempo reale, può essere ottenuto <div> Aggiungere il data-options="display_selector:# id " id corrisponde l'attributo id e il valore dell'elemento cursore, a titolo di esempio:
Esempi
<Span id = "mySlider"> </ span>
<Div class = "gamma-cursore "-opzioni dati data-cursore = "display_selector: #mySlider;">
<Span class = "gamma-cursore Maniglia a"> </ span>
<Span class = "gamma-cursore -Active-segmento"> </ span>
</ Div>
Prova »
Combinazione di opzioni dati
L'esempio seguente utilizza display_selector e initial opzioni di dati:
Esempi
<Div class = "range-cursore " data-data slider-options = "display_selector: #mySlider; iniziale: 20;">
<Span class = "gamma-cursore Maniglia a"> </ span>
<Span class = "gamma-cursore -Active-segmento"> </ span>
</ Div>
Prova »
Passo? Lunga
Per impostazione predefinita, il cursore si sposta per ridurre l'aumento del numero "1" È possibile aggiungere data-options="step: num ;" ," attributo per modificare il valore del passo ?. Esempio è impostato a 25:
Esempi
<Div class = "gamma-cursore " data-opzioni di data-cursore = "display_selector: #mySlider; step: 25;">
<Span class = "gamma-cursore Maniglia a"> </ span>
<Span class = "gamma-cursore -Active-segmento"> </ span>
</ Div>
Prova »
intervallo personalizzato
Per impostazione predefinita, il valore nella gamma di "0" a "100" È possibile aggiungere-Opzioni dati start e end per impostare valori di intervallo. I seguenti esempi impostare il valore dell'intervallo di "1" a "20":
Esempi
<Div class = "gamma-cursore " data-opzioni di data-cursore = "display_selector: #mySlider; inizio: 1; fine: 20;">
<Span class = "gamma-cursore Maniglia a"> </ span>
<Span class = "gamma-cursore -Active-segmento"> </ span>
</ Div>
Prova »
Uso della griglia
Utilizzare la seguente per usare il cursore nella griglia:
Esempi
<Div class = "piccoli-10 colonne">
<Div class = "gamma-cursore "-opzioni dati data-cursore = "display_selector: #mySlider;">
<Span class = "gamma-cursore Maniglia a"> </ span>
<Span class = "gamma-cursore -Active-segmento"> </ span>
</ Div>
</ Div>
<Div class = "piccoli-2 colonne">
<! - L'elemento di visualizzazione (Suggerimento : usare i CSS per posizionare perfettamente esso) ->
<Span id = stile "mySlider" = "display: block; margin-top: 14px;"> </ span>
</ Div>
</ Div>
Prova »
utilizzare Input
L'esempio seguente utilizza il <input> sostituire <span> per visualizzare il valore del cursore:
Esempi
<Div class = "piccoli-10 colonne">
<Div class = "range-cursore " data-data slider-options = "display_selector: #mySlider; iniziale: 72;">
<Span class = "gamma-cursore Maniglia a"> </ span>
<Span class = "gamma-cursore -Active-segmento"> </ span>
</ Div>
</ Div>
<Div class = "piccoli-2 colonne">
<! - L'elemento di visualizzazione (Suggerimento : usare i CSS per posizionare perfettamente esso) ->
<Input type = "numero" id = stile "mySlider" = "margin-top: 7px;" value = "72">
</ Div>
</ Div>
Prova »