jQuery Mobile automaticamente i moduli HTML in stile per farle sembrare accattivante e touch-friendly.
jQuery Mobile Form Struttura
jQuery Mobile utilizza i CSS per lo stile elementi del modulo HTML, che li rende attraente e facile da usare.
In jQuery Mobile è possibile utilizzare i seguenti controlli modulo:
- Ingressi di testo
- ricerca Ingressi
- Pulsanti di scelta
- caselle di controllo
- selezionare i menu
- Sliders
- Interruttori a levetta flip
Quando si lavora con le forme jQuery Mobile si dovrebbe sapere:
- Il <form> elemento deve avere un metodo e un attributo action
- Ogni elemento modulo deve avere un attributo unico "id". L'ID deve essere univoco attraverso le pagine del sito. Questo è perché una singola pagina modello di navigazione di jQuery Mobile consente tante "pagine" diverse per essere presenti allo stesso tempo
- Ogni elemento modulo deve avere un'etichetta. Impostare l'attributo for dell'etichetta per abbinare l'id dell'elemento
Esempio
<form method="post" action="demoform.asp" >
<label for="fname"> First name: </label>
<input
type="text" name="fname" id="fname" >
</form>
Prova tu stesso " Suggerimento: utilizzare un segnaposto per specificare un breve accenno al fatto che descrive il valore atteso di un campo di immissione:
Esempio
<label for="fname">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name..." >
Prova tu stesso " Suggerimento: per nascondere l'etichetta, utilizzare il "ui-hidden-accessible" di classe. Questo è spesso utilizzato quando si desidera l'attributo segnaposto dell'elemento per servire come l'etichetta:
Esempio
<label for="fname"
class="ui-hidden-accessible" ">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name..." >
Prova tu stesso " Suggerimento: Se si desidera un "clear button" (icona X sul lato destro del campo di input che cancella il contenuto del campo), aggiungere i dati-chiara-BTN = "true" l'attributo:
Esempio
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-clear-btn="true" >
Prova tu stesso " Il "clear button" può essere aggiunto in qualsiasi <input> elemento, ad eccezione di <textarea> . Campi di ricerca hanno questo attributo impostato su "true" come default - per cambiare, è sufficiente specificare data-clear-btn="false" .
Pulsanti jQuery Mobile Forma
Bottoni in forme sono codificati con standard HTML <input> elementi (pulsante, Reset, inviare). Sono automaticamente in stile, che li rende attraente e facile da usare su entrambi i dispositivi mobili e computer desktop:
Esempio
<input type="button" value="Button">
<input type="reset" value="Reset
Button">
<input type="submit" value="Submit Button">
Prova tu stesso " Per lo stile inoltre un pulsante di <input>, utilizzare uno degli attributi data-* elencati nella seguente tabella:
Valore grassetto indica il valore di default.
| Attributo | Valore | Descrizione |
|---|---|---|
| data-corners | true | false | Specifica se il pulsante deve avere gli angoli arrotondati o no |
| data-icon | Icons Reference | Specifica l'icona del pulsante |
| data-iconpos | left | right | top | bottom | notext | Specifica la posizione dell'icona |
| data-inline | true | false | Specifica se il pulsante dovrebbe essere in linea o no |
| data-mini | true | false | Specifica se il tasto dovrebbe essere piccolo o no |
| data-shadow | true | false | Specifica se il pulsante deve avere ombre o no |
Includere o escludere l'attributo (s) che si desidera / non vogliono:
<input type="submit" value="Submit" data-icon="check"
data-iconpos="right" data-inline="true">
Prova tu stesso " Field Containers
Per rendere le etichette e gli elementi del modulo appaiono correttamente su schermi più ampi, avvolgere un <div> o <fieldset> elemento con il "ui-field-contain" class intorno all'elemento label / modulo:
Esempio
<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>
Prova tu stesso " Il "ui-field-contain" etichette stile di classe e controlli dei moduli basati sulla larghezza della pagina. Quando la larghezza del foglio è maggiore di 480 px, esso posizionare automaticamente l'etichetta sulla stessa riga del controllo modulo. Quando meno di 480px, l'etichetta sarà posta sopra l'elemento del modulo.
Suggerimento: Per evitare di jQuery Mobile per automaticamente elementi di stile tappable / cliccabili, usa il data-role="none" attributo:
Esempio
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-role="none" >
Prova tu stesso " Modulo di presentazione in jQuery Mobile
jQuery Mobile gestirà automaticamente l'invio del modulo tramite la tecnologia AJAX, e tenterà di integrare la risposta del server nel DOM dell'applicazione.