jQuery Mobile Araç Çubuğu

jQuery Mobile Araç Çubuğu

Araç çubuğu elementleri genellikle başlık ve alt kısmında yerleştirilir - "ziyaret edilmiş" navigasyonu sağlamak için:

Başlık çubuğu

Başlık kısmı genellikle başlık başlığı/LOGO veya bir ila iki düğme içerecektir (genellikle ana sayfa, seçenek veya arama düğmeleri).

Başlık kısmına sol veya / ve sağ tarafa düğme ekleyebilirsiniz.

Aşağıdaki kod, başlık başlığına sol tarafa bir düğme ekleyecek ve sağ tarafa bir düğme ekleyecektir:

Örnek

<div data-role="header">
  <a href="#" data-role="button">Ana Sayfa</a>
  <h1>Hoş geldiniz, Ana Sayfama</h1>
  <a href="#" data-role="button">Ara</a>
</div>

Kendi kendine deneyin

Aşağıdaki kod, başlık başlığına sol tarafa bir düğme ekleyecektir:

<div data-role="header">
  <a href="#" data-role="button">Ana Sayfa</a>
  <h1>Hoş geldiniz, Ana Sayfama</h1>
</div>

Ancak, <h1> elementi ardından düğme bağlantıları yerleştirirseniz, bu bağlantılar metin sağında görünmez. Başlık başlığına sağa düğme eklemek için "ui-btn-right" sınıfını belirtin:

Örnek

<div data-role="header">
  <h1>Hoş geldiniz, Ana Sayfama</h1>
  <a href="#" data-role="button" class="ui-btn-right">Ara
</div>

Kendi kendine deneyin

İpucu:Başlık, bir veya iki düğme içerebilir, ancak alt kısmın sınırlaması yoktur.

Alt kısm çubuğu

Başlık kısmına göre, alt kısım daha esnek - daha pratik ve çeşitli, bu yüzden gerekli sayıda düğmeyi içerebilir:

Örnek

<div data-role="footer">
  <a href="#" data-role="button">Sina Weibo'ya aktar</a>
  <a href="#" data-role="button">Tencent Weibo'ya aktar</a>
  <a href="#" data-role="button">QQ Körfezi'ne aktar</a>
</div>

Kendi kendine deneyin

Not:Alt başlık ve sayfa başlığının stilleri farklıdır (iç kenar boşlukları ve boşluklar azaltılır ve düğmeler ortalanmaz). Bu sorunu düzeltmek için alt başlık ayarında "ui-btn" sınıfını kullanın:

Örnek

<div data-role="footer" class="ui-btn">

Kendi kendine deneyin

Ayrıca, alt başlıkta düğmeleri yatay mı yoksa dikey mi olarak bir araya getirebilirsiniz:

Örnek

<div data-role="footer" class="ui-btn">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="plus">Sina Weibo'ya aktar</a>
    <a href="#" data-role="button" data-icon="plus">Tencent Weibo'ya aktar</a>
    <a href="#" data-role="button" data-icon="plus">QQ Körfezi'ne aktar</a>
  </div>
</div>

Kendi kendine deneyin

Sayfa başlığı ve alt başlığı konumlandırma

Sayfa başlığı ve alt başlığın yerleştirilme yöntemleri üçtür:

  • Yatay - varsayılan. Sayfa başlığı ve alt başlığı sayfa içeriği ile aynı satırda yer alır.
  • Sabit - Sayfa ve alt başlık, sayfa üstünde ve altında kalacaktır.
  • Tam sayfa - fixed ile benzer; sayfa ve alt başlık, sayfa içeriği üzerinde de kalacak ve hafifçe şeffaf olacaktır.

Sayfa başlığı ve alt başlığı konumlandırmak için data-position özelliğini kullanın:

Yatay Konumlandırma (varsayılan)

<div data-role="header" data-position="inline"</div>
<div data-role="footer" data-position="inline"</div>

Kendi kendine deneyin

Sabit Konumlandırma

<div data-role="header" data-position="fixed"</div>
<div data-role="footer" data-position="fixed"</div>

Kendi kendine deneyin

Tam sayfa konumlandırma etmeyi istiyorsanız, lütfen data-position="fixed" kullanın ve bu ögeye data-fullscreen özelliğini ekleyin:

Tam sayfa konumlandırma

<div data-role="header" data-position="fixed" data-fullscreen="true"</div>
<div data-role="footer" data-position="fixed"} data-fullscreen="true"</div>

Kendi kendine deneyin

İpucu:fullscreen fotoğraflar, görseller ve videolar için çok idealdir.

İpucu:Fixed ve fullscreen konumlandırma için, ekran dokunulduğunda başlık ve alt başlık gizlenir ve gösterilir.