jQuery Mobile automatisch Stil HTML-Formulare, um sie ansprechender und Touch-freundlich aussehen.
jQuery Mobile Form Struktur
jQuery Mobile nutzt CSS-Stilelementen HTML-Formular, so dass sie attraktiv und einfach zu bedienen.
In jQuery Mobile können Sie folgende Formular-Steuerelemente verwenden:
- Texteingaben
- Suchen Eingänge
- Radio Knöpfe
- Ankreuzfelder
- Wählen Sie Menüs
- Sliders
- Flip-Kippschalter
Wenn mit jQuery Mobile Formulare arbeiten, sollten Sie wissen:
- Das <form> Element muss eine Methode und ein action - Attribut
- Jede Form Element ein eindeutiges Attribut "id" haben. Die ID muss über die Seiten der Website eindeutig sein. Dies liegt daran, jQuery Mobile Single-Seite ermöglicht die Navigation-Modell viele verschiedene "Seiten" zur gleichen Zeit anwesend sein
- Jedes Formular-Element muss ein Etikett. Stellen Sie die für das Attribut des Etiketts die ID des Elements zu entsprechen
Beispiel
<form method="post" action="demoform.asp" >
<label for="fname"> First name: </label>
<input
type="text" name="fname" id="fname" >
</form>
Versuch es selber " Tipp: Verwenden Sie einen Platzhalter mit einem kurzen Hinweis zu spezifizieren , die den erwarteten Wert eines Eingabefeldes beschreibt:
Beispiel
<label for="fname">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name..." >
Versuch es selber " Tipp: Um das Etikett zu verbergen, verwenden Sie die "ui-hidden-accessible" Klasse. Dies wird häufig verwendet, wenn Sie den Platzhalter-Attribut des Elements wollen als Markierung dienen:
Beispiel
<label for="fname"
class="ui-hidden-accessible" ">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name..." >
Versuch es selber " Tipp: Wenn Sie einen wollen "clear button" (ein X - Symbol auf der rechten Seite des Eingabefeldes, das den Inhalt des Feldes löscht), fügen Sie die Daten-clear-BTN = "true" Attribut:
Beispiel
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-clear-btn="true" >
Versuch es selber " Die "clear button" - <input> <textarea> "clear button" kann auf jedem hinzugefügt werden <input> Element, mit Ausnahme von <textarea> . Suchfelder haben dieses Attribut auf "true" als Standard - , es zu ändern, geben einfach data-clear-btn="false" .
jQuery Mobile Formular Buttons
Buttons in Formen werden mit Standard - HTML codiert <input> Elemente (Button, Reset, einreichen). Sie werden automatisch gestylt, sie attraktiv und einfach zu bedien auf beiden mobilen Geräten und Desktop-Computer zu machen:
Beispiel
<input type="button" value="Button">
<input type="reset" value="Reset
Button">
<input type="submit" value="Submit Button">
Versuch es selber " Um zusätzlich ein <input> Button-Stil, verwenden Sie einen der Attribute data- * in der Tabelle unten aufgeführt:
Bold Wert zeigt Standardwert.
| Attribut | Wert | Beschreibung |
|---|---|---|
| data-corners | true | false | Gibt an, ob die Schaltfläche abgerundete Ecken haben sollte oder nicht |
| data-icon | Icons Reference | Gibt das Symbol der Schaltfläche |
| data-iconpos | left | right | top | bottom | notext | Gibt die Position des Symbols |
| data-inline | true | false | Gibt an, ob die Taste inline sein sollte oder nicht |
| data-mini | true | false | Gibt an, ob die Taste klein sein soll oder nicht |
| data-shadow | true | false | Gibt an, ob die Schaltfläche Schatten haben soll oder nicht |
Einschließen oder das Attribut auszuschließen sind (s) Sie wollen / nicht wollen:
<input type="submit" value="Submit" data-icon="check"
data-iconpos="right" data-inline="true">
Versuch es selber " Field Containers
Etiketten und Formularelemente auf einem größeren Bildschirmen aussehen richtig zu machen, wickeln Sie ein <div> oder <fieldset> Element mit dem "ui-field-contain" Klasse um das Label / form - Element:
Beispiel
<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>
Versuch es selber " Die "ui-field-contain" Klasse - Stil Etiketten und Form auf die Breite der Seite basierte Steuerungen. Wenn die Breite der Seite größer als 480px ist, legen Sie sie automatisch das Etikett auf der gleichen Linie wie die Form Kontrolle. Wenn weniger als 480px, wird das Etikett über dem Formularelement platziert werden.
Tipp: Um jQuery Mobile verhindern automatisch Stil entnehmbare / klickbare Elemente, die Verwendung data-role="none" Attribut:
Beispiel
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-role="none" >
Versuch es selber " Formular Vorlage in jQuery Mobile
jQuery Mobile wird das Formular Vorlage über AJAX automatisch handhaben, und versucht, die Antwort des Servers in das DOM der Anwendung zu integrieren.