jQuery Mobile Düğmeleri

移动应用程序基于触控操作的便利性之上构建。

jQuery Mobile'da düğme oluşturma

jQuery Mobile'daki düğmeler üç yöntemle oluşturulabilir:

  • <button> ögesi kullanarak
  • <input> ögesi kullanarak
  • data-role="button" kullanılan <a> ögesi

<button>

<button> düğmesi

Kişisel olarak deneyin

<input>

<input type="button" value="Düğme">

Kişisel olarak deneyin

<a>

<a href="#" data-role="button">Düğme

Kişisel olarak deneyin

İpucu:jQuery Mobile'daki düğmeler otomatik olarak stil alır, bu da mobil cihazlardaki etkileşim ve kullanılabilirliği artırır. Sayfa aralarını bağlamak için data-role="button" <a> öğesini kullanmanızı ve form gönderimleri için <input> veya <button> öğelerini kullanmanızı öneririz.

Navigasyon düğmesi

Sayfa aralarını düğme ile bağlamak için data-role="button" <a> öğesini kullanın:

Örnek

<a href="#pagetwo" data-role="button">Sayfa ikisine git

Kişisel olarak deneyin

Satır içi düğmesi

Öntanımlı olarak, düğmeler ekranın tamamını kaplar. Düğmelerin içeriğine uyum sağlaması gerekiyorsa veya iki veya daha fazla düğme yan yana gösterilmesi gerekiyorsa, data-inline="true" ekleyin:

Örnek

<a href="#pagetwo" data-role="button" data-inline="true">Sayfa ikisine git

Kişisel olarak deneyin

Grup düğmeleri

jQuery Mobile, düğmeleri gruplamak için basit bir yöntem sunar.

data-role="controlgroup" özelliğini ve data-type="horizontal|vertical" ile birlikte kullanarak düğmeleri yatay veya dikey olarak gruplamak için:

Örnek

<div data-role="controlgroup" data-type="horizontal">
  <a href="#anylink" data-role="button">Düğme 1</a>
  <a href="#anylink" data-role="button">Düğme 2</a>
  <a href="#anylink" data-role="button">Düğme 3</a>
</div>

Kişisel olarak deneyin

İpucu:Öntanımlı olarak, grup düğmeleri dikey olarak gruplanır, birbirleriyle dış kenarlık ve boşluk yoktur. Ayrıca, sadece ilk ve son düğmeler yuvarlak köşelere sahiptir ve bu da güzel bir görünüm yaratır.

Geri düğmesi

Geri düğmesi oluşturmak için data-rel="back" özelliğini kullanın (bağlantının href değerini göz ardı eder):

Örnek

<a href="#" data-role="button" data-rel="back">Geri

Kişisel olarak deneyin

Daha fazla, data-* özellikleri butonlar için kullanılır

Özellik Değer Açıklama Örnek
data-corners true | false Düğmenin köşelerinin yuvarlak olup olmadığını belirler. Test
data-mini true | false Küçük düğme olup olmadığını belirler. Test
data-shadow true | false Düğmenin gölgesi olup olmadığını belirler. Test

jQuery Mobile data-* özellikleri hakkında tam bilgi için ziyaret edin jQuery Mobile Data Özellikleri Referans Kılavuzu.

Düğmelere ikon eklenmesi nasıl yapılır gösterilir.