Najlepszy samouczek suwak Fundacja W 2024 r. W tym samouczku możesz dowiedzieć się
Filet i suwak wyłączania,suwak w pionie,wartość Suwak,
suwak Fundacja
Fundacja suwak pozwala użytkownikowi wybrać zakres wartości przeciągając:
Suwak przy użyciu <div class="range-slider" data-slider>
" danych Suwak> Utwórz. W <div>
wewnątrz, dodać dwa <span>
Element: <span class="range-slider-handle">
Tworzenie prostokątny suwak (niebieskim tle), <span class="range-slider-active-segment">
w szarej suwak po powierzchni suwaka.
Uwaga: Suwak wymaga JavaScript. Więc trzeba zainicjować OUNDATION JS:
Przykłady
<Div class = "zakres-slider " danych Suwak>
<Span class = "zakres-slider -handle"> </ span>
<Span class = "zakres-slider -Active-segmentowy"> </ span>
</ Div>
<! - Inicjowanie Fundacja JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Spróbuj »
Filet i suwak wyłączania
Użyj .radius
i .round
klas dodać zaokrąglonymi narożnikami suwak. Użyj .disabled
klasę wyłączyć suwak:
Przykłady
<Div class = "zakres-slider " danych Suwak> pl </ div>
<Div class = "zakres-suwak Promień" danych Suwak> pl. </ div>
<Div class = "Zakres Suwak- round" danych Suwak> pl. </ div>
<Div class = "zakres-slider wyłączony" danych Suwak> pl. </ div>
Spróbuj »
suwak w pionie
Użyj .vertical-range
klasy i data-options="vertical: true;"
;" , aby utworzyć suwak pionowy:
Przykłady
<Div class = "zakres-suwak pionowy wybiegu" data-opcje danych suwak = "vertical: true;">
<Span class = "zakres-slider -handle"> </ span>
<Span class = "zakres-slider -Active-segmentowy"> </ span>
</ Div>
Spróbuj »
wartość Suwak
Domyślnie suwak w środku (wartość "50"). Możesz dodać data-options="initial: num "
" , aby zmodyfikować domyślną wartość nieruchomości:
Przykłady
<Div class = "zakres-slider " dane-options danych suwak = "początkowa: 80;">
<Span class = "zakres-slider -handle"> </ span>
<Span class = "zakres-slider -Active-segmentowy"> </ span>
</ Div>
Spróbuj » Wyświetlanie wartości suwaka
Jeśli musimy przeciągnąć wartość suwaka, gdy na wyświetlaczu w czasie rzeczywistym, można otrzymać poprzez <div>
Dodać data-options="display_selector:# id "
id odpowiada atrybut id oraz wartość elementu suwakowego, jako przykłady:
Przykłady
<! - Wyświetlanie wartości suwaka w tym okresie ->
<Span id = "mySlider"> </ span>
<Div class = "zakres-slider " dane-options danych suwak = "display_selector: #mySlider;">
<Span class = "zakres-slider -handle"> </ span>
<Span class = "zakres-slider -Active-segmentowy"> </ span>
</ Div>
Spróbuj » Kombinacja opcji danych
W poniższym przykładzie użyto display_selector
i initial
opcje danych:
Przykłady
<Span id = "mySlider"> </ span>
<Div class = "zakres-slider " data-opcje danych suwak = "display_selector: #mySlider; początkowa: 20;">
<Span class = "zakres-slider -handle"> </ span>
<Span class = "zakres-slider -Active-segmentowy"> </ span>
</ Div>
Spróbuj » Krok? Długi
Domyślnie, suwak jest przesuwany, aby ograniczyć wzrost liczby "1" Możesz dodać data-options="step: num ;"
;" atrybut zmodyfikować wartości kroku ?. Przykładem jest do 25:
Przykłady
<Span id = "mySlider"> </ span>
<Div class = "zakres-slider " dane-options danych suwak = "display_selector: #mySlider; kroku: 25;">
<Span class = "zakres-slider -handle"> </ span>
<Span class = "zakres-slider -Active-segmentowy"> </ span>
</ Div>
Spróbuj » interwał niestandardowe
Domyślnie wartość w zakresie od "0" do "100" Można dodatek Opcje danych start
i end
, aby ustawić wartości interwału. Poniższe przykłady ustawić interwał wartość "1" do "20":
Przykłady
<Span id = "mySlider"> </ span>
<Div class = "zakres-slider " dane-options danych suwak = "display_selector: #mySlider start: 1; Koniec: 20;">
<Span class = "zakres-slider -handle"> </ span>
<Span class = "zakres-slider -Active-segmentowy"> </ span>
</ Div>
Spróbuj » Korzystanie z sieci
Poniższe polecenia za pomocą suwaka w sieci:
Przykłady
<Div class = "wiersz">
<Div class = "small-10 kolumny">
<Div class = "zakres-slider " dane-options danych suwak = "display_selector: #mySlider;">
<Span class = "zakres-slider -handle"> </ span>
<Span class = "zakres-slider -Active-segmentowy"> </ span>
</ Div>
</ Div>
<Div class = "small-2 kolumny">
<! - Element wyświetlacza (Wskazówka : wykorzystanie CSS doskonale pozycjonować go) ->
<Span id = "mySlider" style = "display: block; margin-top: 14px;"> </ span>
</ Div>
</ Div>
Spróbuj » Użyj Wejście
Poniższy przykład używa <input>
wymiany <span>
, aby wyświetlić wartość suwaka:
Przykłady
<Div class = "wiersz">
<Div class = "small-10 kolumny">
<Div class = "zakres-slider " data-opcje danych suwak = "display_selector: #mySlider; początkowa: 72;">
<Span class = "zakres-slider -handle"> </ span>
<Span class = "zakres-slider -Active-segmentowy"> </ span>
</ Div>
</ Div>
<Div class = "small-2 kolumny">
<! - Element wyświetlacza (Wskazówka : wykorzystanie CSS doskonale pozycjonować go) ->
<Input type = "number" id = "mySlider" style = "margin-top: 7px;" value = "72">
</ Div>
</ Div>
Spróbuj »