Halaman jQuery Mobile

Memulai dengan jQuery Mobile

Petunjuk:Meskipun jQuery Mobile cocok untuk semua perangkat bergerak, ia masih dapat ada masalah kompatibilitas di komputer meja (disebabkan oleh dukungan terbatas CSS3).

Dahulu, kami menyarankan Anda untuk menggunakan peramban Google Chrome untuk mendapatkan pengalaman membaca terbaik.

Contoh

<body>
<div data-role="page">
  <div data-role="header">
    <h1>Selamat datang di halaman utama saya</h1>
  </div>
  <div data-role="content">
    <p>Saya seorang pengembang bergerak!</p>
  </div>
  <div data-role="footer">
    <h1>Teks kaki halaman</h1>
  </div>
</div>
</body>

Coba Sendiri

Pengertian contoh:

  • data-role="page" adalah halaman yang ditampilkan di browser
  • data-role="header" membuat toolbar di atas halaman (biasanya digunakan untuk judul dan tombol pencari)
  • data-role="content" menentukan konten halaman, seperti teks, gambar, formulir, tombol, dll
  • data-role="footer" membuat toolbar di dasar halaman

Dalam kontainer ini, Anda dapat menambahkan elemen HTML apapun - paragraf, gambar, judul, daftar, dll.

Petunjuk:Atribut data-* HTML5 digunakan untuk membuat tampilan interaksi yang ramah dengan sentuh untuk perangkat bergerak melalui jQuery Mobile.

Menambahkan halaman dalam jQuery Mobile

Dalam jQuery Mobile, Anda dapat membuat banyak halaman dalam satu file HTML.

Percayai id unik untuk memisahkan setiap halaman, dan gunakan atribut href untuk menghubungkan antar nya:

Contoh

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">Pindah ke halaman kedua</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Pergi ke Halaman Satu</a>
  </div>
</div>

Coba Sendiri

Keterangan:Aplikasi web yang mengandung banyak konten dapat mempengaruhi waktu pemuatannya (seperti teks, tautan, gambar, dan skrip, dll). Jika Anda tidak ingin menggunakan file eksternal di halaman tautan internal, gunakan file eksternal:

<a href="externalfile.html">Pindah ke halaman eksternal</a>

Gunakan halaman sebagai dialog

Dialog adalah tipe jendela untuk menampilkan informasi atau meminta masukan.

Untuk membuat dialog saat pengguna mengklik (sentuh) tautan, tambahkan data-rel="dialog" ke tautan tersebut:

Contoh

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo"> data-rel="dialog">Pergi ke Halaman Dua</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Pergi ke Halaman Satu</a>
  </div>
</div>

Coba Sendiri