jQuery Mobile otomatik stil HTML formları onları ilgi çekici ve dokunmatik dostu görünmesi için.
jQuery Mobile Form Yapısı
jQuery Mobile onları çekici ve kullanımı kolay hale stil HTML form elemanlara CSS kullanır.
jQuery Mobile için aşağıda belirtilen form denetimlerini kullanabilirsiniz:
- Metin Girdiler
- Arama Girdiler
- Radyo Düğmeleri
- Onay kutuları
- Menüleri seçin
- kaydırıcılar
- Ayaklı Geçiş Anahtarları
jQuery Mobile formlarla çalışırken Bilmeniz gereken:
- <form> elemanı bir yöntem ve bir eylem özniteliği olmalıdır
- Her form elemanı benzersiz olması gerekir "id" niteliği. id sitedeki sayfalar arasında benzersiz olması gerekir. Bu jQuery Mobile tek sayfalık navigasyon modeli birçok farklı verir, çünkü "pages" aynı anda mevcut olması
- Her form öğesi bir etikete sahip olmalıdır. Set for elemanın id maç için etiketin öznitelik
Örnek
<form method="post" action="demoform.asp" >
<label for="fname"> First name: </label>
<input
type="text" name="fname" id="fname" >
</form>
Kendin dene " İpucu: Bir giriş alanının beklenen değerini açıklayan kısa ipucu belirtmek için bir yer tutucu kullanın:
Örnek
<label for="fname">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name..." >
Kendin dene " İpucu: etiket gizlemek için kullanın "ui-hidden-accessible" sınıfı. Eğer elementin tutucu Özellik etiketinin olarak hizmet istediğinizde sık kullanılır:
Örnek
<label for="fname"
class="ui-hidden-accessible" ">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name..." >
Kendin dene " İpucu: Bir isterseniz "clear button" (Alanın içeriğini temizler giriş alanının sağ tarafında bir X simgesi) eklemek data-clear-btn="true" niteliği:
Örnek
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-clear-btn="true" >
Kendin dene " "clear button" herhangi eklenebilir <input> hariç, eleman <textarea> . Arama alanları olarak ayarlanmış bu özniteliği "true" , bunu değiştirmek basitçe belirtmek için - varsayılan olarak data-clear-btn="false" .
jQuery Mobile Formu Düğmeler
Formlarda Düğmeler standart HTML ile kodlanmıştır <input> elemanlar (düğme, teslim sıfırlama). Bunlar otomatik hem mobil cihazlar ve masaüstü bilgisayarlarda onları çekici ve kolay kullanımlı hale tarz:
Örnek
<input type="button" value="Button">
<input type="reset" value="Reset
Button">
<input type="submit" value="Submit Button">
Kendin dene " Ayrıca bir stil <input> düğmesini herhangi birini kullanmak data-* aşağıdaki tabloda listelenmiştir nitelikler:
Kalın değer varsayılan değeri gösterir.
| nitelik | değer | Açıklama |
|---|---|---|
| data-corners | true | false | düğmesi yuvarlatılmış köşeler var ya da değil belirtir |
| data-icon | Icons Reference | düğmenin simgesini belirtir |
| data-iconpos | left | right | top | bottom | notext | simgesinin konumunu belirtir |
| data-inline | true | false | düğme satır içi veya olmaması gerektiğini belirtir |
| data-mini | true | false | düğme, küçük veya olmaması gerektiğini belirtir |
| data-shadow | true | false | düğme gölgeleri sahip olmayan veya belirtir |
Dahil veya hariç attribute(s) Eğer / istemiyoruz istiyorum:
<input type="submit" value="Submit" data-icon="check"
data-iconpos="right" data-inline="true">
Kendin dene " Field Containers
Etiketler ve form elemanları daha geniş ekranlarda düzgün görünmesi için, sarın <div> veya <fieldset> ile eleman "ui-field-contain" etiketi / form elemanı etrafında sınıfta:
Örnek
<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>
Kendin dene " "ui-field-contain" sayfa genişliğine dayanan sınıf stil etiketleri ve form kontrolleri. Sayfanın genişliği 480px daha büyük olduğunda, otomatik form denetimi ile aynı hat üzerinde etiket yerleştirin. Ne zaman az 480px, etiket formu elemanı yukarıda yer alacaktır.
İpucu: otomatik stil tappable / tıklanabilir unsurları kullanmak jQuery Mobile önlemek için data-role="none" niteliği:
Örnek
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-role="none" >
Kendin dene " JQuery Mobile Form gönderme
jQuery Mobile otomatik AJAX yoluyla form gönderimini idare edecek ve başvurunun DOM içine Sunucu yanıtı entegre çalışacaktır.