jQuery Mobile automatycznie stylu formularze HTML, aby wyglądały wciągające i dotyk w obsłudze.
jQuery Mobile Form Struktura
jQuery Mobile korzysta CSS do stylu elementów formularza HTML, dzięki czemu są atrakcyjne i łatwe w obsłudze.
W jQuery Mobile możesz korzystać z następujących elementów sterujących formularza:
- Wejścia tekstowe
- Wejścia wyszukiwania
- Przyciski radiowe
- Pola wyboru
- Wybierz menu
- Sliders
- Flip przełączniki Przegubowe
Podczas pracy z formami jQuery Telefony powinieneś wiedzieć:
- <form> element musi mieć metodę i atrybut działania
- Każdy element formularz musi mieć unikalny atrybut "id". Identyfikator musi być unikalny w całej stron w witrynie. To dlatego, że single-page modelu nawigacji jQuery Mobile umożliwia wiele różnych "stron", aby być obecny w tym samym czasie
- Każdy element forma musi mieć etykietę. Ustawienie atrybutu etykiety aby dopasować id elementu
Przykład
<form method="post" action="demoform.asp" >
<label for="fname"> First name: </label>
<input
type="text" name="fname" id="fname" >
</form>
Spróbuj sam " Wskazówka: Użyj zastępczy, aby podać krótki podpowiedź opisujący oczekiwaną wartość w polu wejściowym:
Przykład
<label for="fname">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name..." >
Spróbuj sam " Wskazówka: Aby ukryć etykietę, użyj "ui-hidden-accessible" klasę. Jest to często wykorzystywane, gdy chcesz atrybut zastępczy elementu, aby służyć jako etykiety:
Przykład
<label for="fname"
class="ui-hidden-accessible" ">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name..." >
Spróbuj sam " Wskazówka: Jeśli chcesz mieć "clear button" (X ikonę po prawej stronie pola wejściowego Czyści zawartość pola), dodać dane-clear-BTN = "true" atrybutu:
Przykład
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-clear-btn="true" >
Spróbuj sam " "clear button" mogą być dodawane na dowolnym <input> elementu, z wyjątkiem <textarea> . Pola wyszukiwania mają ten atrybut ustawiony na "true" jako domyślny - aby go zmienić, wystarczy podać data-clear-btn="false" .
Komórka jQuery Formularz Przyciski
Przyciski w formach są kodowane ze standardem HTML <input> elementów (przycisk, Reset, przedstawienia). Są one automatycznie stylu, dzięki czemu są atrakcyjne i łatwe w obsłudze zarówno na urządzeniach mobilnych i komputerów stacjonarnych:
Przykład
<input type="button" value="Button">
<input type="reset" value="Reset
Button">
<input type="submit" value="Submit Button">
Spróbuj sam " Aby dodatkowo styl element <input> przycisk, użyj jednej z data- * cech wymienionych w poniższej tabeli:
Bold wartość wskazuje wartość domyślną.
| Atrybut | Wartość | Opis |
|---|---|---|
| data-corners | true | false | Określa, czy przycisk powinien mieć zaokrąglone narożniki, czy nie |
| data-icon | Icons Reference | Określa ikonę przycisku |
| data-iconpos | left | right | top | bottom | notext | Określa pozycję ikony |
| data-inline | true | false | Określa, czy przycisk powinien być inline, czy też nie |
| data-mini | true | false | Określa, czy przycisk powinien być mały, czy nie |
| data-shadow | true | false | Określa, czy przycisk powinien mieć cienie czy nie |
Włączyć lub wyłączyć atrybut (y) chcesz / nie chce:
<input type="submit" value="Submit" data-icon="check"
data-iconpos="right" data-inline="true">
Spróbuj sam " Field Containers
Aby etykiet i elementów formularza wyglądają poprawnie na szerszych ekranach, zawinąć <div> lub <fieldset> elementu z "ui-field-contain" klasie wokół elementu label / forma:
Przykład
<form method="post" action="demoform.asp">
<div class="ui-field-contain" >
<label for="fname">First name:</label>
<input
type="text" name="fname" id="fname">
<label for="lname">Last
name:</label>
<input type="text" name="lname" id="lname">
</div>
</form>
Spróbuj sam " "ui-field-contain" etykiety stylu klasy i kontrolki formularzy w oparciu o szerokości strony. Gdy szerokość strony jest większa niż 480 na automatycznie umieszczać etykiet na tej samej linii, jako kontrolę postaci. Gdy mniej niż 480px, etykieta zostanie umieszczony powyżej elementu formularza.
Wskazówka: Aby zapobiec jQuery Mobile, aby automatycznie stylu tappable / klikalne elementy, użyj data-role="none" atrybut:
Przykład
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-role="none" >
Spróbuj sam " Złożenie formularza w jQuery Mobile
jQuery Mobile automatycznie obsługiwać przesyłanie formularza za pośrednictwem AJAX i dokładają wszelkich starań, aby zintegrować odpowiedź serwera do DOM wniosku.