jQuery Mobile-Formular
jQuery Mobile fügt automatisch automatisch Stil zu HTML-Formularen, sie attraktiver zu machen suchen, freundlicher zu berühren.
jQuery Mobile Formularstruktur
jQuery Mobile zu verwenden CSS Stil HTML-Formularelemente sie attraktiver und einfacher zu bedienen zu machen.
In jQuery Mobile, können Sie folgende Formular-Steuerelemente verwenden:
- Texteingabefeld
- Sucheingabefeld
- Radioknopf
- Checkbox
- Wählen Sie Menü
- Slider
- Klappen Sie den Kippschalter
Wenn jQuery Mobile Formular verwenden, sollten Sie wissen:
- <Form> Element muss ein Verfahren und eine action-Attribut
- Jede Form Element ein eindeutiges Attribut "id" haben. ID muss auf allen Seiten der gesamten Website eindeutig sein. Dies liegt daran, jQuery Mobile Einzelseiten-Navigationsmechanismus dargestellt, so dass eine Vielzahl von verschiedenen Seiten gleichzeitig
- Jedes Formular-Element muss ein Etikett. Registerkarte Einstellungen für die Eigenschaften der Element - ID übereinstimmen
Beispiele
<label for="fname">姓名: </label>
<input type="text" name="fname" id="fname" >
</form>
Versuchen »
Um das Etikett zu verbergen, verwenden Sie die Klasse ui-versteckt-zugänglich. Dies wird häufig verwendet, wenn Sie die Attribute des Elements als Platzhalter-Tag sind:
Beispiele
<label for="fname" class="ui-hidden-accessible" >姓名:</label>
<input type="text" name="fname" id="fname" placeholder="姓名...">
</form>
Versuchen »
Tipp: Wir können die Daten-clear-BTN verwenden = "true " Attribut eine Schaltfläche hinzufügen , den Inhalt des Eingabefeldes zu löschen (ein X - Symbol rechts neben dem Eingabefeld):
Beispiele
<Input type = "text" name = "fname" id = "fname" data-clear-BTN = "true">
Versuchen »
 | Clear-Taste in das Eingabefeld ein <input> Element verwendet wird, aber nicht in der <textarea> in. Suchfeld Daten-clear-btn Der Standardwert ist "true", können Sie die Daten-clear-BTN = "false" verwenden Sie das Symbol zu entfernen. |
|---|
jQuery Mobile Forms Symbol
die Schaltfläche Codeform ist die Standard-HTML <input> -Element (Button, Reset, einreichen). Sie werden automatisch Stile Rendering automatisch mobile Geräte auf den Desktop anzupassen:
Beispiele
<Input type = "reset" value = "Reset-Taste">
<Input type = "submit" value = "Submit Button">
Versuchen »
Wenn Sie in zusätzliche Stile hinzufügen müssen <input> Taste können Sie die folgende Tabelle verwenden Attribute data- *:
| Immobilien | Wert | Beschreibung |
|---|---|---|
| Daten Ecken | true | false | Gibt an, ob eine Schaltfläche abgerundete Ecken hat |
| Daten-Symbol | Icon - Referenzhandbuch | Bezeichnung Button-Symbol |
| Daten-iconpos | left | right | top | bottom | notext | Geben Sie den Speicherort des Symbols |
| Daten-Inline | true | false | Gibt an, ob Inline-Taste |
| Daten-mini | true | false | Gibt an, ob die Mini-Taste |
| Daten-Schatten | true | false | Gibt an, ob die Schaltfläche Schatteneffekte hinzufügen |
Button-Symbole hinzuzufügen:
<Input type = "reset" value = "Reset-Taste">
<Input type = "submit" value = "Submit Button">
Versuchen »
Feld Container
Um aussehen Etiketten und Formularelemente besser geeignet für mit großem Bildschirm, bitte oder <fieldset> Element das Label / Formularelement umgibt, wird verwendet, um mit "ui-Feld enthalten" Klasse <div>:
Beispiele
<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>
Versuchen »
| Klassen auf der Breite der Seite basiert ui-Feld enthalten Stile für Etiketten und Formular-Steuerelemente hinzufügen. Wenn die Breite der Seite größer als 480px ist, wird es automatisch das Etikett und Formsteuerung auf der gleichen Linie platzieren. Wenn die Breite der Seite kleiner als 480px, wird das Etikett auf Formularelemente platziert werden. |
|---|
Tipp: Um zu verhindern , jQuery Mobile automatisch Stil klickbare Elemente hinzufügen, verwenden Daten-role = "none" Attribut:
Beispiele
<input type="text" name="fname" id="fname" data-role="none" >
Versuchen »
| jQuery Mobile in Form Vorlage jQuery Mobile automatisch von AJAX Form Vorlage behandelt, und die Integration Server versucht, auf das DOM der Anwendung zu reagieren. |
|---|