jQuery Mobile düğmeleri daha arzu görünmesini sağlayacaktır simgeler kümesi sağlar.
jQuery Mobile Düğmeleri Simge Ekleme
Kullanmak, Düğmenizin bir simge eklemek için ui-icon sınıfını ve bir simge pozisyon sınıfı ile simgeyi konumlandırmak (ui-btn-icon - pos ) :
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left" >Search</a>
Not: Diğer düğmeler için, liste görünümleri ve formlarda düğmeleri gibi, kullanmak gerekir data-icon özelliğini. Bu daha sonraki bir bölümde açıklanacaktır.
Aşağıda jQuery Mobile sağlayan bazı mevcut simgeleri listeledik:
| Simge sınıfı | Açıklama | ikon | Örnek |
|---|---|---|---|
| ui-icon-arrow-l | Sol ok | Dene | |
| ui-icon-arrow-r | Sağ ok | Dene | |
| ui-icon-info | Bilgi | Dene | |
| ui-icon-delete | silmek | Dene | |
| ui-icon-back | Geri | Dene | |
| ui-icon-audio | Hoparlörler | Dene | |
| ui-icon-lock | Asma kilit | Dene | |
| ui-icon-search | Arama | Dene | |
| ui-icon-alert | Alarm | Dene | |
| ui-icon-grid | ızgara | Dene | |
| ui-icon-home | Ev | Dene |
Tüm jQuery Mobile düğme simgeleri tam bir referans için lütfen gidin lütfen jQuery Mobile Simgeler Referans .
Konumlandırma Simgeler
: Simgenin düğme yerleştirilmiş olması gereken yerde için dört değerden biri belirtebilirsiniz top, right, bottom veya left .
Kullanım ui-btn-icon konumunu belirtmek için sınıf:
Bağlantı Düğmeleri için Simge Pozisyonu
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top" >Top</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-right" >Right</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-bottom" >Bottom</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-left" >Left</a>
Kendin dene " Eğer bağlantı düğmeleri için simge konumunu belirtmezseniz, simge gösterilmeyecektir.
Sadece Simge gösteriliyor
Sadece kullanın simgeyi görüntülemek için "notext" simge pozisyon için değeri olarak:
Çemberi Çıkarma
Varsayılan olarak, tüm simgeler gri daireyle (disc) etraflarında. Daire kaldırmak için, ekleme "ui-nodisc-icon" eleman ya da kabı için sınıf:
Örnek
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left">With circle (default)</a>
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left ui-nodisc-icon" >Without circle</a>
Kendin dene " Siyah veya Beyaz Simgeler
Varsayılan olarak, tüm simgeler beyazdır. Siyah simge rengini değiştirmek için, eklemek "ui-alt-icon" eleman ya da kaba:
Örnek
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left">White</a>
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left ui-alt-icon" >Black</a>
Kendin dene " Diğer Örnekler
Ekle "ui-nodisc-icon" Bir kaba sınıf
Bir örneği, "ui-nodisc-icon" sınıfı, bir kaba ilave edildi.
Ekle "ui-alt-icon" Bir kaba sınıf
Bir örneği, "ui-alt-icon" sınıfı, bir kaba ilave edildi.