Buat Halaman
Meskipun jQuery Mobile bekerja pada semua perangkat mobile, mungkin memiliki beberapa masalah kompatibilitas pada komputer desktop (karena dukungan CSS3 terbatas).
Untuk tutorial ini, kami menyarankan Anda menggunakan Google Chrome Browser untuk pengalaman membaca yang lebih baik.
Di bawah ini, kami telah membuat sederhana, standar halaman jQuery Mobile:
Contoh
<body>
<div data-role="page" >
<div
data-role="header" >
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content" >
<p>I Am Now A Mobile Developer!!</p>
</div>
<div data-role="footer" >
<h1>Footer
Text</h1>
</div>
</div>
</body> Cobalah sendiri " Contoh menjelaskan:
- The data-role="page" adalah halaman yang ditampilkan dalam browser
- The data-role="header" menciptakan toolbar di bagian atas halaman (sering digunakan untuk tombol judul atau pencarian)
- The data-role="main" mendefinisikan isi halaman, seperti teks, gambar, tombol, bentuk, dll
- The "ui-content" kelas menambahkan padding tambahan dan marjin dalam konten halaman
- The data-role="footer" menciptakan toolbar di bagian bawah halaman
- Di dalam wadah ini, Anda dapat menambahkan elemen HTML - paragraf, gambar, judul, daftar, dll
HTML5 data-* atribut yang digunakan di seluruh jQuery Mobile untuk membuat "touch-friendly" tampilan dan menarik untuk perangkat mobile.
Menambahkan Artikel dalam jQuery Mobile
Dalam jQuery Mobile, Anda dapat membuat beberapa halaman dalam satu file HTML.
Pisahkan setiap halaman dengan id yang unik dan menggunakan href atribut untuk menghubungkan antara mereka:
Contoh
<div data-role="page" id="pageone" >
<div data-role="main" class="ui-content">
<a href="#pagetwo" >Go to
Page Two</a>
</div>
</div>
<div data-role="page"
id="pagetwo" >
<div
data-role="main" class="ui-content">
<a href="#pageone" >Go to Page
One</a>
</div>
</div> Cobalah sendiri " Tip: waktu buka akan terpengaruh oleh aplikasi web dengan banyak konten (yaitu teks, link, gambar, script dll). Gunakan file eksternal jika Anda tidak ingin link halaman internal:
<a href="externalfile.html">Go To External Page</a>
Menggunakan Pages sebagai Dialog
Sebuah kotak dialog adalah jenis jendela yang digunakan untuk menampilkan informasi khusus atau masukan permintaan.
Untuk membuat kotak dialog yang terbuka ketika pengguna keran pada link, tambahkan data-dialog="true" untuk halaman yang ingin ditampilkan sebagai dialog:
Contoh
<div data-role="page" id="pageone">
<div
data-role="main" class="ui-content">
<a href="#pagetwo">Go to Page Two</a>
</div>
</div>
<div data-role="page"
data-dialog="true" id="pagetwo">
<div
data-role="main" class="ui-content">
<a href="#pageone">Go to Page One</a>
</div>
</div> Cobalah sendiri "