jQuery Mobile automat formularele HTML de stil pentru a le face să arate atrăgător și touch-friendly.
jQuery Mobile Form Structura
jQuery Mobile foloseste CSS pentru elemente de formular HTML de stil, ceea ce le face atractive și ușor de utilizat.
În jQuery Mobile, puteți utiliza următoarele controale de formă:
- textinput
- Căutare Intrări
- Butoane radio
- Casetele de selectare
- Selectați Meniuri
- Sliders
- Întreruperi Toggle Flip
Atunci când se lucrează cu forme jQuery Mobile ar trebui să știi:
- <form> Elementul trebuie să aibă o metodă și un atribut de acțiune
- Fiecare element de formular trebuie să aibă un unic "id" atribut. ID-ul trebuie să fie unică în paginile site-ului. Acest lucru se datorează faptului că modelul de navigare cu o singură pagină jQuery Mobile permite mai multe diferite "pages" să fie prezent în același timp ,
- Fiecare element de formular trebuie să aibă o etichetă. Setați for atribut al etichetei pentru a se potrivi cu id - ul elementului
Exemplu
<form method="post" action="demoform.asp" >
<label for="fname"> First name: </label>
<input
type="text" name="fname" id="fname" >
</form>
Încearcă - l singur » Sfat: Folosiți un înlocuitor pentru a specifica un indiciu scurt , care descrie valoarea așteptată a unui câmp de intrare:
Exemplu
<label for="fname">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name..." >
Încearcă - l singur » Indicație: Pentru a ascunde eticheta, folosiți "ui-hidden-accessible" clasa. Acest lucru este adesea folosit atunci când doriți atribut înlocuitor elementului pentru a servi drept etichetă:
Exemplu
<label for="fname"
class="ui-hidden-accessible" ">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name..." >
Încearcă - l singur » Sfat: Dacă doriți un "clear button" (o pictogramă X de pe partea dreaptă a câmpului de intrare , care șterge conținutul câmpului), adăugați data-clear-btn="true" atribut:
Exemplu
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-clear-btn="true" >
Încearcă - l singur » "clear button" poate fi adăugat pe orice <input> Element, cu excepția <textarea> . Câmpurile de căutare au acest atribut este setat la "true" ca implicit - să - l schimbe, pur și simplu specificați data-clear-btn="false" .
Butoanele jQuery Mobile Form
Butoanele din formulare sunt codificate cu standardul HTML <input> elemente (buton, reset, trimiteți). Acestea sunt decorate în mod automat, ceea ce le face atractive și ușor de utilizat, pe ambele dispozitive mobile și computere desktop:
Exemplu
<input type="button" value="Button">
<input type="reset" value="Reset
Button">
<input type="submit" value="Submit Button">
Încearcă - l singur » Pentru stilul suplimentar un <input> buton, utilizați oricare dintre data-* atributele enumerate în tabelul de mai jos:
Valoarea Bold indică valoarea implicită.
| Atribut | Valoare | Descriere |
|---|---|---|
| data-corners | true | false | Specifică dacă butonul ar trebui să aibă colțuri rotunjite sau nu |
| data-icon | Icons Reference | Specifică pictograma butonului |
| data-iconpos | left | right | top | bottom | notext | Specifică poziția pictogramei |
| data-inline | true | false | Specifică dacă butonul ar trebui să fie în linie sau nu |
| data-mini | true | false | Specifică dacă butonul ar trebui să fie mici sau nu |
| data-shadow | true | false | Specifică dacă butonul ar trebui să aibă umbre sau nu |
Includeți sau exclude attribute(s) pe care doriți / nu doriți:
<input type="submit" value="Submit" data-icon="check"
data-iconpos="right" data-inline="true">
Încearcă - l singur » Field Containers
Pentru a face etichete și elemente de formular se uite în mod corespunzător pe ecrane mai mari, înfășurați un <div> sau <fieldset> Element cu "ui-field-contain" clasa în jurul elementului de etichetă / formular:
Exemplu
<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>
Încearcă - l singur » "ui-field-contain" etichete de stil de clasă și controale de formă bazate pe lățimea paginii. În cazul în care lățimea paginii este mai mare de 480 x, puneți-l în mod automat eticheta de pe aceeași linie ca și controlul forma. Atunci când mai puțin de 480 x, eticheta va fi plasat deasupra elementului de formular.
Sfat: Pentru a preveni jQuery Mobile în mod automat elemente de stil tappable / clickable, utilizați data-role="none" de data-role="none" atribut:
Exemplu
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-role="none" >
Încearcă - l singur » Trimiterea formularelor în jQuery Mobile
jQuery Mobile se va ocupa în mod automat trimiterea formularului prin intermediul AJAX, și va încerca să integreze răspunsul serverului în DOM cererii.