jQuery Mobile Araç Çubukları
Araç Çubuğu elemanlar genellikle üstbilgi ve altbilgi içine yerleştirilir - için "easy-access" navigasyon:
Başlık Barlar
Başlık sayfanın üst kısmında bulunan ve genellikle sayfa başlığı / logo veya bir veya iki düğme ihtiva edilir (typically home, options or search) .
Sen sola ve / veya başlığında sağ tarafındaki düğmeleri ekleyebilir.
Aşağıdaki kod, bir katacak "Home" sola düğmesi ve "Search" başlığı başlık metninin sağındaki düğmeyi:
Örnek
<div data-role="header">
<a href="#"
class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
</div> Kendin dene " Aşağıdaki kod yalnızca başlık başlığın sol tarafına bir düğme eklenir:
Örnek
<div data-role="header">
<a href="#"
class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
</div> Kendin dene " Aşağıdaki kod yalnızca başlık Başlığın sağ tarafına bir düğme eklenir:
Örnek
<div data-role="header">
<h1>Welcome To My Homepage</h1>
<a href="#"
class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">Search</a>
</div> Kendin dene " altbilgi hiçbir sınırı vardır iken bir başlık, bir veya iki düğme içerebilir.
Altbilgi Barlar
altbilgi sayfanın alt kısmında yer almaktadır.
: Daha işlevsel ve sayfalar boyunca değiştirilebilir olduğunu ve gerektiği gibi bu nedenle birçok düğmeler içerebilir - altbilgi başlığındaki daha esnektir
Örnek
<div data-role="footer">
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div> Kendin dene " İpucu: altbilgideki düğmeleri varsayılan olarak ortalanmıyorsa. Bunu düzeltmek için, sadece CSS kullanın:
Yatay veya dikey olarak altbilgi Ayrıca grup düğmeleri:
Örnek
<div data-role="footer" style="text-align:center;">
<div data-role="controlgroup"
data-type="horizontal" >
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>
</div> Kendin dene " Konumlandırma üstbilgi ve altbilgi
üstbilgi ve altbilgi üç şekilde konumlandırılabilir:
- Inline - Standart. Sayfa başlığı ve altlığı sayfa içeriği ile inline
- Fixed - Sayfa başlığı ve altlığı sayfanın üst ve alt kısmında konumlandırılmış kalacaktır
- Fullscreen - gibi sabit davranır; Başlık ve altbilgileriniz aynı zamanda sayfa içeriğinin üzerine, üstünde ve altında konumlandırılmış kalacaktır. Aynı zamanda hafif transparan olduğu
Kullanım data-position üstbilgilerinizi ve altbilgilerinizi konumlandırmak için niteliğini:
Satır içi pozisyonu (Default)
<div data-role="header" data-position="inline" ></div>
<div data-role="footer"
data-position="inline" ></div> Kendin dene " Sabit Konum
<div data-role="header" data-position="fixed" ></div>
<div data-role="footer"
data-position="fixed" ></div> Kendin dene " Kullanın veri-konum = "sabit" tam ekran konumu sağlamak ve eklemek için data-fullscreen elemana niteliğini:
Tam Ekran pozisyonu
<div data-role="header"
data-position="fixed" data-fullscreen="true" ></div>
<div data-role="footer"
data-position="fixed" data-fullscreen="true" ></div> Kendin dene " İpucu: Tam ekran pozisyon fotoğraflar, resimler ve videolar için idealdir.
İpucu: Ekranı dokunulduğunda gizlemek ve hem sabit hem tam ekran pozisyonlar için gösteri sayfa başlığı ve altlığı olacak.
Diğer Örnekler
Araç çubukları sadece simge gösteriliyor
Kullanılması ui-btn-icon-notext sınıfını sadece başlık ve alt bilgi düğmeleri simgeyi görüntülemek için.