jQuery Mobil Navigasyon Barlar
Gezinti çubuğu genellikle bir üst bilgi veya alt içinde, yatay olarak hizalanmış bir bağlantı grubundan oluşur:
Bar içine sarılmış bağlantıların bir sırasız liste olarak kodlanmıştır <div> sahip elemanın data-role="navbar" özniteliği:
Örnek
<div data-role="header">
<div data-role="navbar" >
<ul>
<li><a href="#anylink">Home</a></li>
<li><a href="#anylink">Page Two</a></li>
<li><a href="#anylink">Search</a></li>
</ul>
</div>
</div>
Kendin dene " Varsayılan olarak, bir gezinme çubuğunun içindeki bağlantıları otomatik bir düğme (gerek dönüşecek class="ui-btn" veya data-role="button" ).
düğmeleri içeriği kadar geniş varsayılan olarak bulunmaktadır. eşit düğmeleri bölmek için bir sırasız listeyi kullanın: 1 düğmesi genişliğinin% 100'ünü alır, 2 tuş% 50, her biri 3 düğme 33.3%, sen gezinme çubuğu üzerinde fazla 5 düğmelerini belirtirseniz vb Ancak, kaydırılır paylaşan birden hatları (bakınız "More Examples" aşağıda).
Navigasyon Düğmeleri simgeler
Kullanmak, navigasyon düğmesinin bir simge eklemek için data-icon özelliğini:
data-icon belirtilen CSS sınıfları aynı değerleri kullanmak öznitelik "Icons" bölümünde. Tek fark yerine belirtme, yani class="ui-icon- value " , size niteliğini belirtmek data-icon=" value " .
| Öznitelik Değeri | Açıklama | ikon |
|---|---|---|
| data-icon="home" | Ev | |
| data-icon="arrow-r" | Sağ ok | |
| data-icon="search" | Arama |
Tüm jQuery Mobile düğme simgeleri tam bir referans için lütfen gidin lütfen jQuery Mobile Simgeler Referans .
Konumlandırma Simgeler
Sadece olduğu gibi "ui-btn-icon- position " (belirtilen sınıfın "Icons" : simge navigasyon düğmesi konumlandırılmış olması gereken yerde bölümde) seçebilirsiniz top, right, bottom veya left .
simgesi konumu navbar kabın üzerine ayarlanır - her buton bağlantı konumlandırmak mümkün değildir. Kullanım data-iconpos konumunu belirtmek için niteliğini:
| Öznitelik Değeri | Açıklama | Örnek |
|---|---|---|
| data-iconpos="top" | Üst simge hizalama | Dene |
| data-iconpos="right" | Sağ simgesi hizalama | Dene |
| data-iconpos="bottom" | Alt simge hizalama | Dene |
| data-iconpos="left" | Sol simgesi hizalama | Dene |
Varsayılan olarak, navigasyon düğmeleri simgeler metnin üst yerleştirilir (data-iconpos="top") .
Aktif Düğmeler
Gezinme çubuğu üzerinde bir bağlantı dokunulduğunda / tıklandığında, seçilen alır (pressed down) bakın.
Bağlantıyı dokunun kullanmak zorunda kalmadan bu görünüm elde class="ui-btn-active" :
Birden sayfalar için, isteyebilirsiniz "selected" kullanıcı üzerinde sayfasını temsil her düğme için göz. Bunu yapmak için, eklemek "ui-state-persist" bağlantılarınıza sınıf, hem de "ui-btn-active" sınıfı:
Diğer Örnekler
Içeriğinde Navbars
Nasıl içine bir gezinti çubuğu eklemek için data-role="content" .
Altbilgideki Navbars
Nasıl altbilgi içinde bir gezinti çubuğu ekleyin.
5'ten fazla düğme
Bir gezinme çubuğunda 10 düğmelerinin bir gösteri