Mobil uygulamalar görüntülenmesini istediğiniz görmediği şeyler dokunarak sadeliği üzerine inşa edilir.
jQuery Mobile bir Düğme oluşturma
jQuery Mobile A düğmesine üç şekilde oluşturulabilir:
- Kullanımı <input> elemanı
- Kullanımı <button> ile eleman class="ui-btn"
- Kullanılması <a> ile eleman class="ui-btn"
jQuery Mobile Düğmeler otomatik olarak mobil cihazlar ve masaüstü bilgisayarlar hem onları çekici ve kullanışlı hale tarz. Biz kullanmanızı öneririz <a> ile eleman class="ui-btn" sayfaları arasında bağlantı kurmak ve <input> veya <button> form gönderimine ilişkin unsurlar.
Not: sürüm 1.4 önce, kullanılan data-role="button" jQuery Mobile bir düğme oluşturmak için özellik. 1.4 itibariyle tarzı düğmeleri çerçeve kullanımı CSS sınıfları (hariç <input> düğmeleri).
Navigasyon Düğmeleri
Kullanmak, düğmelerle sayfalar arasında bağlamak için <a> ile eleman class="ui-btn" :
Gruplanmış Düğmeler
jQuery Mobile birlikte düğmeleri gruplandırmak için kolay bir yol sağlar.
Kullanım data-role="controlgroup" ile birlikte özniteliği data-type="horizontal|vertical" : Bir kap elemanda, ister yatay veya dikey grup düğmeleri belirtmek için
Örnek
<div data-role="controlgroup" data-type="horizontal" >
<a href="#" class="ui-btn">Button 1</a>
<a href="#"
class="ui-btn">Button 2</a>
<a href="#"
class="ui-btn">Button 3</a>
</div>
Kendin dene " Varsayılan olarak, gruplanmış düğmeleri aralarında hiçbir marjlarına ve boşluk ile dikey gruplandırılır. Ve sadece ilk ve son düğmesi gruplanmış zaman güzel bir görünüm yaratır ki, köşeleri yuvarlatılmış vardır.
Geri Düğmeler
Bir Geri düğmesine oluşturmak için kullanmak data-rel="back" niteliği ( Note: this will ignore the anchor's href value) :
Satır içi Düğmeler
Varsayılan olarak, düğmeleri ekranın tam genişliğinde kaplar. Eğer bir düğmeye istiyorsanız o içeriği sadece bu kadar geniş, ya da sen yan yana görünmesi iki ya da daha fazla düğme istiyorsanız, eklemek "ui-btn-inline" sınıfı:
Bağlantı Düğmeler için fazla CSS Sınıfları
| Sınıf | Açıklama | Örnek |
|---|---|---|
| ui-btn-b | Beyaz metin ile siyah arka plana düğme rengini değiştirir (default is gray background with black text) . | Dene |
| ui-corner-all | düğmesinin yuvarlatılmış köşeleri ekler | Dene |
| ui-mini | düğme daha küçük yapar | Dene |
| ui-shadow | düğmeye gölgeler ekler | Dene |
Eğer birden fazla sınıfını kullanın gibi, her bir boşlukla sınıf ayırmak istiyorsanız: class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"
Varsayılan olarak, <input> düğmeleri gölge ve yuvarlatılmış köşeler var. <a> ve <button> eleman yok.
Ortak stilleri için CSS sınıflarının tam Referans için, bizim ziyaret jQuery Mobile CSS Sınıfları Referans .
Bir sonraki bölümde düğmeleriniz simgeleri eklemek gösterilmiştir.