jQuery Mobile Sayfası

jQuery Mobile ile başlayın

İpucu:jQuery Mobile her türlü mobil cihaz için uygundur, ancak sınırlı CSS3 desteği nedeniyle masaüstü bilgisayarlarda uyumluluk sorunları olabilir.

Bu nedenle, en iyi okuma deneyimi için Google Chrome tarayıcısını kullanmanızı öneriyoruz.

örnek

<body>
<div data-role="page">
  <div data-role="header">
    <h1>Web sayfamı ziyaret edin</h1>
  </div>
  <div data-role="content">
    <p>Ben bir mobil geliştiriciyim!</p>
  </div>
  <div data-role="footer">
    <h1>Altyazı metni</h1>
  </div>
</div>
</body>

Kişisel olarak deneyin

Örnek açıklaması:

  • data-role="page" tarayıcıda görüntülenen sayfalarıdır
  • data-role="header" sayfanın üstündeki araç çubuğunu oluşturur (sıklıkla başlık ve arama düğmeleri için kullanılır)
  • data-role="content" sayfanın içeriğini tanımlar, örneğin metin, görsel, form ve düğmeler vb.
  • data-role="footer" sayfa altındaki araç çubuğunu oluşturur

Bu konteynerlere, istediğiniz herhangi bir HTML öğesi ekleyebilirsiniz - paragraflar, görseller, başlıklar, listeler vb.

İpucu:HTML5 data-* özellikleri, jQuery Mobile ile mobil cihazlar için "dokunmatik dostu" kullanıcı arayüzleri oluşturmak için kullanılır.

jQuery Mobile'da sayfa eklemek

jQuery Mobile'da, tek bir HTML dosyasında birden fazla sayfa oluşturabilirsiniz.

Her sayfayı benzersiz bir id ile ayırın ve href özelliği ile birbirine bağlayın:

örnek

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">sayfa ikisine geç
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Sayfa Birine Git</a>
  </div>
</div>

Kişisel olarak deneyin

Not:Büyük miktarda içeriği içeren web uygulamaları, yükleme süresini etkileyebilir (metin, bağlantılar, görseller ve betikler vb.). İç bağlantılı sayfa sayfalarında olmayı tercih etmiyorsanız, dış dosyaları kullanın:

<a href="externalfile.html"> dış sayfaya geç

Sayfayı pencere olarak kullanma

Pencereler, bilgi göstermek veya girdi talep etmek için kullanılan bir tür ekran pencereleridir.

Kullanıcı bir bağlantıya tıkladığında (hafif dokunuş) bir pencere açmak istiyorsanız, bu bağlantıya data-rel="dialog" ekleyin:

örnek

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo"> data-rel="dialog">Sayfa İkiye Git</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Sayfa Birine Git</a>
  </div>
</div>

Kişisel olarak deneyin