jQuery Mobile Gezinme Çubuğu

jQuery Mobile Gezinme Çubuğu

Navigasyon çubuğu, genellikle başlık veya altlık içinde bulunan bir grup yatay sıralı bağlantıdan oluşur.

Varsayılan olarak, navigasyon çubuğundaki bağlantılar otomatik olarak düğmelere dönüştürülür (data-role="button" gerekmez).

Navigasyon çubuğunu tanımlamak için data-role="navbar" özelliğini kullanın:

örnek

<div data-role="header">
  <div data-role="navbar">
    <ul>
      <li><a href="#anylink">Ana Sayfa</a></li>
      <li><a href="#anylink">Sayfa İki</a></li>
      <li><a href="#anylink">Ara</a></li>
    </ul>
  </div>
</div>

Kişisel olarak deneyin

İpucu:Düğmenin genişliği, varsayılan olarak, içeriğiyle aynıdır. Düğmeleri eşit olarak bölmek için liste kullanın: bir düğme 100% genişlik kaplar, iki düğme her biri 50% genişlik paylaşır, üç düğme 33.3%, bunlara benzer. Ancak, navigasyon çubuğunda beşten fazla düğme belirlediğinizde, birden fazla satıra katlanır (sayfa altındaki "Daha Fazla Örnek"e bakın).

Aktif düğme

Navigasyon çubuğundaki bağlantılar tıklanıldığında seçili görünümü kazanır (basılı).

Bu görünümü tıklamadan uygulamak için class="ui-btn-active" kullanın:

örnek

<li><a href="#anylink" class="ui-btn-active">Ana Sayfa</a></li>

Kişisel olarak deneyin

Birden fazla sayfa için, her düğme için "seçili" görünümü ayarlamak gerekebilir, böylece kullanıcı o sayfayı gözden geçiriyor. Bunu yapmak için, bağlantıya "ui-state-persist" sınıfını ve "ui-btn-active" sınıfını ekleyin:

örnek

<li><a href="#anylink" class="ui-btn-active ui-state-persist">Ana Sayfa</a></li>

Kişisel olarak deneyin

Daha fazla örnek

İçerik içinde gezinme çubuğu
data-role="content" içinde nasıl gezinme çubuğu eklenir.
Sayfa alt kısmındaki gezinme çubuğu
Sayfa alt kısmına nasıl gezinme çubuğu eklenir.
Gezinme çubuğunda ikon nasıl konumlandırılır
Sayfa alt kısmı içindeki gezinme çubuğuna nasıl ikon yerleştirilir.
Beşten fazla düğme
Gezinme çubuğunda on düzine düğme gösterimi.