Ultimele tutoriale de dezvoltare web
 

jQuery Mobile Formați Sliders

❮ Anterior Urmatorul capitol ❯

Controale jQuery Mobile Slider

Un cursor vă permite să selectați o valoare dintr-o serie de numere:

Pentru a crea un cursor, folosiți <input type="range"> :

Exemplu

<form method="post" action="demoform.asp">
  <label for="points">Points:</label>
  < input type="range" name="points" id="points" value="50" min="0" max="100">
</form>
Încearcă - l singur »

Utilizați following atribute pentru a specifica restricții:

  • max - specifică valoarea maximă permisă
  • min - specifică valoarea minimă permisă
  • step - specifică intervalele numărului legal
  • value - specifică valoarea implicită

Sfat: Dacă doriți să arate valoarea pe butonul cursor, adăugați data-show-value="true" :

Exemplu

<input type="range" data-show-value="true" >
Încearcă - l singur »

Sfat: Dacă doriți să valoarea la pop - up pe ecran ca un tooltip (as you slide) în data-popup-enabled="true" (as you slide) , adăugați data-popup-enabled="true" - data-popup-enabled="true" :

Exemplu

<input type="range" data-popup-enabled="true" >
Încearcă - l singur »

Sfat: Dacă doriți să evidențiați pista până la valoarea cursorului, adăugați data-highlight="true" :

Exemplu

<input type="range" data-highlight="true" >
Încearcă - l singur »

Flip Comutare

Un comutator clapa este adesea folosit pentru on / butoane adevărat / fals off sau:

Pentru a crea un comutator de flip, folosiți <input type="checkbox"> și specificați un data-role de "flipswitch" data-role de "flipswitch" de "flipswitch" :

Exemplu

<form method="post" action="demoform.asp">
  <label for="switch">Flip toggle switch checkbox:</label>
    <input type="checkbox" data-role="flipswitch" name="switch" id="switch">
</form>
Încearcă - l singur »

În mod implicit, textul de pe comutatorul de flip este "On" și "Off" . Utilizați data-on-text cu data-off-text data-on-text la data-on-text și data-off-text atribute pentru a schimba acest lucru:

Exemplu

<input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-on-text="True" data-off-text="False" >
Încearcă - l singur »

Sfat: Utilizați "checked" atribut pentru a seta una dintre opțiunile pentru a fi pre-selectate:

Exemplu

<input type="checkbox" data-role="flipswitch" name="switch" id="switch" checked >
Încearcă - l singur »

Mai multe exemple

gama slider
Cum sa faci un slider cu două mânere, permițând utilizatorilor să specificați o valoare minimă și maximă într-un interval.

Stil Comutator Flip
Cum de a face trecerea de flip mai larg.


❮ Anterior Urmatorul capitol ❯