Formularz - Suwak jQuery Mobile

Kontrolka suwaka jQuery Mobile

Suwak pozwala wybrać wartość z zakresu liczbowego:

Aby utworzyć suwak, użyj <input type="range">:

Przykład

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

Spróbuj sam

Użyj poniższych atrybutów, aby określić ograniczenia:

  • max - określa dozwoloną wartość maksymalną
  • min - określa dozwoloną wartość minimalną
  • step - określa dopuszczalne przedziały liczbowe
  • value - określa wartość domyślną

Wskazówka:Jeśli chcesz wyróżnić tor wartości suwaka, dodaj data-highlight="true":

Przykład

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

Spróbuj sam

Przełącznik

Przełączniki są często używane do przycisków włącz/wyłącz lub tak/nie:

Aby utworzyć przełącznik, użyj elementu <select> z atrybutem data-role="slider" i dodaj dwa elementy <option>:

Przykład

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

Spróbuj sam

Wskazówka:Użyj atrybutu "selected", aby ustawić jedną z opcji jako domyślną (podświetlona):

Przykład

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

Spróbuj sam