Komórka jQuery Form
jQuery Mobile automatycznie automatycznie dodać styl do formularzy HTML, aby wyglądały bardziej atrakcyjne, bardziej przyjazne w dotyku.
Struktura jQuery Komórka Formularz
jQuery Mobile, aby korzystać z CSS do stylu elementów formularza HTML, aby stały się one bardziej atrakcyjne i łatwiejsze w użyciu.
W jQuery Mobile, można korzystać z następujących elementów sterujących formularza:
- polu tekstowym
- Pole wyszukiwania wejście
- przycisk radiowy
- pole wyboru
- Wybierz Menu
- suwak
- Przerzuć przełącznik
Podczas korzystania z formularza jQuery komórkowy, należy wiedzieć:
- <Form> musi mieć sposób i atrybut działania
- Każdy element formularz musi mieć unikalny atrybut "id". Identyfikator musi być unikalna na wszystkich stronach w całej witrynie. To dlatego, że mechanizm jQuery Komórka pojedynczej strony nawigacyjnego przedstawiony tak, że wiele różnych stron jednocześnie
- Każdy element forma musi mieć etykietę. Zakładka Ustawienia dla właściwości dopasować identyfikator elementu
Przykłady
<label for="fname">姓名: </label>
<input type="text" name="fname" id="fname" >
</form>
Spróbuj »
Aby ukryć etykietę, należy użyć klasy UI-ukryty inwalidzkim. Jest to często wykorzystywane, gdy jesteś atrybuty elementu jako znak zastępczy:
Przykłady
<label for="fname" class="ui-hidden-accessible" >姓名:</label>
<input type="text" name="fname" id="fname" placeholder="姓名...">
</form>
Spróbuj »
Wskazówka: Możemy używać danych czysta-BTN = "true " atrybutu dodać przycisk, aby wyczyścić zawartość pola wejściowego (ikonę X po prawej stronie pola wejściowego):
Przykłady
<Input type = "text" name = "fname" id = "fname" Dane-clear-btn = "true">
Spróbuj »
 | Przycisk Clear w polu tekstowym <input> element jest używany, ale nie w <textarea> w. Pole wyszukiwania danych jasno-btn Domyślna wartość to "true", można użyć danych czysta-BTN = "false", aby usunąć ikonę. |
|---|
jQuery mobilnych form ikonę
Postać kod przycisku jest standardem HTML <input> element (przycisk Reset, przedstawienia). Będą one automatycznie renderowania style, automatyczne dostosowanie urządzeń mobilnych na pulpit:
Przykłady
<Input type = "reset" value = "reset">
<Input type = "submit" value = "Zatwierdź przyciskiem">
Spróbuj »
Jeśli trzeba dodać dodatkowe style <input> przycisk, można użyć następującej tabeli teleinformatyczny * atrybuty:
| nieruchomość | wartość | opis |
|---|---|---|
| data-rogi | true | false | Określa, czy przycisk ma zaokrąglone rogi |
| Dane-icon | Ikona Reference Manual | Oznaczenie ikona przycisku |
| data-iconpos | left | right | top | bottom | notext | Określ położenie ikony |
| Dane-inline | true | false | Określa, czy przycisk inline |
| Dane-mini | true | false | Określa, czy przycisk mini |
| Dane-shadow | true | false | Określa, czy przycisk, aby dodać efekt cienia |
Przycisk dodać ikony:
<Input type = "reset" value = "reset">
<Input type = "submit" value = "Zatwierdź przyciskiem">
Spróbuj »
pojemniki
Aby etykiet i elementów formularza wyglądać bardziej nadaje się do widescreen, proszę lub <fieldset> elementem otaczającego element etykieta / forma jest używana z "ui-field-contain" class <div>:
Przykłady
<div class="ui-field-contain" >
<label for="fname">姓:</label>
<input type="text" name="fname" id="fname">
<label for="lname">姓:</label>
<input type="text" name="lname" id="lname">
</div>
</form>
Spróbuj »
| ui-field-zawierają zajęcia w oparciu o szerokości strony, aby dodać style dla etykiet i pól formularza. Gdy szerokość strony jest większa niż 480px, zostanie ona automatycznie umieścić etykietę i formę kontroli na tej samej linii. Gdy szerokość strony jest mniejsza niż 480px, etykieta zostanie umieszczona na górze elementów formularza. |
|---|
Wskazówka: Aby zapobiec jQuery Mobile automatycznie dodać styl elementy klikalne, wykorzystanie danych atrybutu role = "none":
Przykłady
<input type="text" name="fname" id="fname" data-role="none" >
Spróbuj »
| jQuery Mobile w przedłożeniu formularza jQuery Mobile automatycznie obsługiwane przez złożenie formularza AJAX, a serwer integracyjny próbuje odpowiedzieć na DOM wniosku. |
|---|