Gli ultimi tutorial di sviluppo web
 

jQuery Mobile cursore Form

❮ Precedente Successivo Capitolo ❯

Controlli jQuery Mobile Slider

Un cursore consente di selezionare un valore da un intervallo di numeri:

Per creare un cursore, usare <input type="range"> :

Esempio

<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>
Prova tu stesso "

Utilizzare i seguenti attributi per specificare restrizioni:

  • max - specifica il valore massimo consentito
  • min - specifica il valore minimo consentito
  • step - specifica gli intervalli di numero legale
  • value - specifica il valore di default

Suggerimento: Se si desidera visualizzare il valore sul tasto di scorrimento, aggiungere data-show-value="true" :

Esempio

<input type="range" data-show-value="true" >
Prova tu stesso "

Suggerimento: Se si desidera il valore di pop-up sullo schermo come un tooltip (come si fa scorrere), aggiungere data-popup-enabled="true" :

Esempio

<input type="range" data-popup-enabled="true" >
Prova tu stesso "

Suggerimento: Se si desidera evidenziare la pista fino al valore di scorrimento, aggiungere data-highlight="true" :

Esempio

<input type="range" data-highlight="true" >
Prova tu stesso "

Flip Toggle Switch

Un interruttore flip è spesso utilizzato per il / true false pulsanti / off o:

Per creare un interruttore a fogli mobili, usare <input type="checkbox"> e specificare una data-role di "flipswitch" :

Esempio

<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>
Prova tu stesso "

Per impostazione predefinita, il testo sullo switch flip è "On" e "Off" . Utilizzare il data-on-text e data-off-text attribuisce a cambiare questo:

Esempio

<input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-on-text="True" data-off-text="False" >
Prova tu stesso "

Suggerimento: utilizzare il "checked" attribuire ad impostare una delle opzioni per essere pre-selezionati:

Esempio

<input type="checkbox" data-role="flipswitch" name="switch" id="switch" checked >
Prova tu stesso "

Altri esempi

cursore gamma
Come fare un cursore con due manici, che consente agli utenti di specificare un valore minimo e massimo in un intervallo.

Stile di vibrazione Interruttore
Come effettuare il passaggio della medaglia più ampio.


❮ Precedente Successivo Capitolo ❯