jQuery Mobile lomakkeen - liukusäädin

jQuery Mobile -liukusäädin

Liukusäädin mahdollistaa arvon valitsemisen tietystä numeroväliltä:

Jos haluat luoda liukusäädintä, käytä <input type="range">:

Esimerkki

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="points">Pisteet:</label>
    <input type="range" name="points" id="points" value="50" min="0" max="100">
  </div>
</form>

Kokeile itse

Käytä seuraavia ominaisuuksia määrittääksesi rajat:

  • max - määrittää sallitun suurimman arvon
  • min - määrittää sallitun pienimmän arvon
  • step - määrittää sallitun numerovälin
  • value - määrittää oletusarvon

Vinkki:Jos haluat korostaa loppusliijan arvon tätä akselia, lisää data-highlight="true":

Esimerkki

<input type="range" data-hightlight="true">

Kokeile itse

Vaihtimet

Vaihtimet käytetään yleensä kytkin/kytön tai kyllä/ei-painikkeissa:

Jos haluat luoda vaihtimen, käytä data-role="slider" -ominaisuuden <select>-elementtiä ja lisää kaksi <option>-elementtiä:

Esimerkki

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="switch">Toggle Switch:</label>
    <select name="switch" id="switch" data-role="slider">
      <option value="on">On</option>
      <option value="off">Off</option>
    </select>
  </div>
</form>

Kokeile itse

Vinkki:Vinkki: Käytä "valittu"-ominaisuutta asettaaksesi yhden vaihtoehdon valituksi (korostetuksi):

Esimerkki

<option value="off" valittu>Off</option>

Kokeile itse