Il miglior tutorial cursore Fondazione Nel 2024, in questo tutorial puoi imparare
Raccordo e cursore disabilita,dispositivo di scorrimento verticale,valore del cursore,
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
<Div class = "range-cursore " data-cursore>
<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 = "range-cursore " data-cursore> it </ div>
<Div class = "gamma-cursore raggio" dati-cursore> it. </ div>
<Div class = "gamma-cursore rotonda" data-cursore> it. </ div>
<Div class = "gamma-cursore disabilitato" data-cursore> it. </ div>
Prova »
dispositivo di scorrimento verticale
Utilizzare .vertical-range
classi e data-options="vertical: true;"
," per creare un cursore verticale:
Esempi
<Div class = "gamma-scorrimento verticale-range" data-opzioni di data-cursore = "verticale: true;">
<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
<Div class = "gamma-cursore " data-opzioni di data-cursore = "iniziale: 80;">
<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
<! - Visualizza il valore del cursore in questo lasso ->
<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
<Span id = "mySlider"> </ span>
<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
<Span id = "mySlider"> </ span>
<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
<Span id = "mySlider"> </ span>
<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 = "riga">
<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 = "riga">
<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 »