jQuery Mobile (04): Konsep Multiple Page, Satu File Banyak Halaman
Baiklah… Tulisan sebelumnya sudah sedikit memberikan gambaran tentang interface yang akan dihasilkan dengan penggunaan jQuery Mobile ini. Ada bermacam-macam interface yang bisa digunakan dan sangat mudah dalam penerapannya. Tetapi pada tulisan ini kita tidak akan membahasnya lagi, karena kita akan membahas tentang cara menerapkan multiple page pada jQuery Mobile.
Pada pembuatan web, biasanya setiap halaman akan diwakili oleh sebuah file. Jika ingin membuat 5 halaman, maka diperlukan 5 buah file. Dengan menggunakan jQuery Mobile, kita bisa menggunakan sebuah file untuk beberapa halaman, inilah yang disebut dengan multiple page.
Baiklah, mungkin supaya lebih jelas kita perlu buka kembali struktur dasar dari halaman web jQuery Mobile ini, bahasan lengkap sudah ada bagian pengantar aplikasi web mobile. Berikut adalah kodenya.
<!DOCTYPE html><html lang="ID"><head> <title>Kerangka Dokumen Halaman jQuery Mobile</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" /> <script src="jquery-1.11.1.min.js"></script> <script src="jquery.mobile-1.4.5.min.js"></script></head><body> <!-- START Definisikan sebagai Halaman {page} --> <div data-role="page"> <!-- Membuat Header --> <header data-role="header"> <h1>Belajar Web Mobile</h1> </header> <!-- Bagian ISI (Konten web) --> <div data-role="content"> Membuat Halaman Web Mobile menggunakan jQuery Mobile </div> <!-- Membuat Footer --> <footer data-role="footer" data-position="fixed"> <h2>banghaji dot com</h2> </footer> </div> <!-- END --></body></html>Tampilannya adalah seperti gambar ini.
Definisi page menggunakan id
Kode di atas adalah untuk sebuah page dalam 1 file. Agar bisa menjadi multipage, maka kita perlu menambahkan definisi halaman (page) pada bagian <body> dan </body> . Contohnya seperti ini:
<!-- definisi halaman 1 --><div data-role="page" id="halaman1"> <header data-role="header"> <h1>Header 1</h1> </header> <div data-role="content"> <p>Halaman 1</p> </div> <footer data-role="footer" data-position="fixed"> <h2>Footer 1</h2> </footer></div><!-- definisi halaman 2 --><div data-role="page" id="halaman2"> <header data-role="header"> <h1>Header 2</h1> </header> <div data-role="content"> <p>Halaman 2</p> </div> <footer data-role="footer" data-position="fixed"> <h2>Footer 2</h2> </footer></div>
Setiap page memiliki struktur yang sama, bedanya adalah pada penentuan ciri dari masing-masing page, yaitu dibedakan menggunakan id. Pada contoh di atas, id-nya berbeda yaitu halaman1 dan halaman2, yang ini menjadi tanda bahwa kita memiliki 2 page dalam 1 file. Kedua page ini akan diperlakukan seolah-olah sebagai halaman dengan file yang berbeda, padahal hanya dalam 1 file saja.
Berpindah antar page
Untuk berpindah dari 1 page ke page yang lain digunakan konsep link dalam HTML, yaitu menggunakan tag <a href="tujuan"> dan </a>. Tujuan perpindahan adalah menuju id dari page yang akan ditampilkan. Karena yang dituju adalah id, maka perlu ditambahkan tanda pagar di depan (#). Sebagai contoh:
<!-- definisi halaman 1 --><div data-role="page" id="halaman1"> <header data-role="header"> <h1>Header 1</h1> </header> <div data-role="content"> <p>Halaman 1</p> <p>Pindah ke <a href="#halaman2">halaman 2</a></p> </div> <footer data-role="footer" data-position="fixed"> <h2>Footer 1</h2> </footer></div><!-- definisi halaman 2 --><div data-role="page" id="halaman2"> <header data-role="header"> <h1>Header 2</h1> </header> <div data-role="content"> <p>Halaman 2</p> <p>Kembali ke <a href="#halaman1">halaman 1</a></p> </div> <footer data-role="footer" data-position="fixed"> <h2>Footer 2</h2> </footer></div>
Untuk melihat bagaimana hasilnya, silahkan ketik kode berikut ini selengkapnya, kemudian simpan dengan nama jqm_multipage.html. Setelah disimpan silahkan lihat hasilnya melalui browser, disarankan menggunakan Emulator Ripple agar terlihat seperti pada perangkat smartphone sungguhan.
<!DOCTYPE html><html lang="ID"><head> <title>Multiple Page</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" /> <script src="jquery-1.11.1.min.js"></script> <script src="jquery.mobile-1.4.5.min.js"></script></head><body> <!-- definisi halaman 1 --> <div data-role="page" id="halaman1"> <header data-role="header"> <h1>Header 1</h1> </header> <div data-role="content"> <p>Halaman 1</p> <p>Pindah ke <a href="#halaman2">halaman 2</a></p> </div> <footer data-role="footer" data-position="fixed"> <h2>Footer 1</h2> </footer> </div> <!-- definisi halaman 2 --> <div data-role="page" id="halaman2"> <header data-role="header"> <h1>Header 2</h1> </header> <div data-role="content"> <p>Halaman 2</p> <p>Kembali ke <a href="#halaman1">halaman 1</a></p> </div> <footer data-role="footer" data-position="fixed"> <h2>Footer 2</h2> </footer> </div></body></html>
Hasilnya seperti diperlihatkan pada gambar berikut.
Efek transisi perpindahan halaman
Untuk lebih mantapnya desain, saat perpindahan antarpage, kita bisa tambahkan efek transisi. Caranya dengan menambahkan atribut data-transition="efek_transisi" ini pada link yang akan diberikan efek transisi. Ada beberapa macam efek transisi, salah satunya adalah “slide” yang menampilkan perpindahan halaman seperti “digeser”. Contoh penulisannya seperti ini: <a href="#halaman2" data-transition="slide">halaman 2</a>.
Adapun macam-macam efek transisinya adalah: slide, slidepage, fade, pop, flip, flow, slideup, slidedown, turn dan none. Silahkan pilih yang disukai. Silahkan dicoba pilih beberapa efek transisi, dan bisa juga dikembangkan lagi contoh di atas untuk beberapa halaman lagi (misal menjadi 4 atau 5 page dalam 1 file).
Saya rasa untuk bahasan web tentang multipage dalam satu file ini kita cukupkan saja. Sampai jumpa pada tutorial selanjutnya.
Gabung dalam percakapan