jQuery Mobile Modulo
jQuery Mobile aggiungerà automaticamente automaticamente lo stile di moduli HTML, farle sembrare più attraente, più amichevole al tatto.
Struttura jQuery Mobile Modulo
jQuery Mobile per utilizzare i CSS per lo stile elementi del modulo HTML per renderli più attraenti e più facili da usare.
In jQuery Mobile, è possibile utilizzare i seguenti controlli modulo:
- casella di immissione di testo
- casella di input di ricerca
- pulsante Radio
- casella di controllo
- Selezionare Menu
- Slider
- Capovolgere l'interruttore a levetta
Quando si utilizza modulo di jQuery Mobile, si dovrebbe sapere:
- <Form> elemento deve avere un metodo ed un attributo di azione
- Ogni elemento modulo deve avere un attributo unico "id". ID deve essere univoco in tutte le pagine in tutto il sito. Questo perché meccanismo jQuery Mobile singola pagina di navigazione viene presentato in modo che una pluralità di pagine differenti allo stesso tempo
- Ogni elemento modulo deve avere un'etichetta. scheda Impostazioni per le proprietà in modo che corrisponda l'elemento id
Esempi
<label for="fname">姓名: </label>
<input type="text" name="fname" id="fname" >
</form>
Prova »
Per nascondere l'etichetta, utilizzare la classe ui-nascosto-accessibile. Questo è spesso usato quando si è gli attributi dell'elemento come un tag segnaposto:
Esempi
<label for="fname" class="ui-hidden-accessible" >姓名:</label>
<input type="text" name="fname" id="fname" placeholder="姓名it.">
</form>
Prova »
Suggerimento: Possiamo usare i dati-chiara-BTN = "true " attributo per aggiungere un pulsante per cancellare il contenuto della casella di input (un'icona X a destra della casella di input):
Esempi
<Input type = "text" name = "fname" id = "fname" Dati-chiara-BTN = "true">
Prova »
pulsante Cancella nella casella di input <input> elemento viene utilizzato, ma non nel <textarea> a. Casella di ricerca dei dati-chiara-btn Il valore predefinito è "true", è possibile utilizzare il data-chiara-BTN = "false" per rimuovere l'icona. |
jQuery Mobile Forms icona
Formare il codice del pulsante è lo standard HTML <input> elemento (pulsante, Reset, presentare). Saranno il rendering automaticamente stili, adattandosi automaticamente dispositivi mobili per desktop:
Esempi
<Input type = "reset" value = "tasto reset">
<Input type = "submit" value = "Submit Button">
Prova »
Se è necessario aggiungere ulteriori stili di <input> tasto, è possibile utilizzare la seguente tabella data- * attributi:
proprietà | valore | descrizione |
---|---|---|
data-angoli | true | false | Specifica angoli se un pulsante ha arrotondato |
dati-icon | Icona Manuale di riferimento | Designazione pulsante con l'icona |
data-iconpos | left | right | superiore | fondo | notext | Specificare la posizione dell'icona |
dati-linea | true | false | Specifica se il pulsante in linea |
dati-mini | true | false | Specifica se il tasto mini |
dati-ombra | true | false | Specifica se il pulsante per aggiungere effetti di ombreggiatura |
Pulsante per aggiungere le icone:
<Input type = "reset" value = "tasto reset">
<Input type = "submit" value = "Submit Button">
Prova »
campo Contenitore
Per rendere le etichette e gli elementi dei moduli guardare più adatto a grande schermo, si prega o <fieldset> elemento che circonda l'elemento dell'etichetta / modulo viene utilizzato con "ui-field-contengono" class <div>:
Esempi
<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>
Prova »
ui-field-contiene le classi in base alla larghezza della pagina per aggiungere stili per etichette e controlli dei moduli. Quando la larghezza del foglio è maggiore di 480 px, si metterà automaticamente il controllo etichetta e modulo sulla stessa riga. Quando la larghezza della pagina è inferiore 480px, l'etichetta sarà posto su elementi di forma top. |
Suggerimento: per evitare jQuery Mobile aggiungere automaticamente elementi cliccabili stile, l'uso dei dati-role = attributo "none":
Esempi
<input type="text" name="fname" id="fname" data-role="none" >
Prova »
jQuery Mobile nella presentazione modulo jQuery Mobile gestito automaticamente da AJAX modulo di presentazione, e il server di integrazione tenta di rispondere al DOM dell'applicazione. |