Dibawah ini kita akan membuat script yang sederhana, standar Pages dari JQuery Mobile,
berikut ini adalah tutorialnya:
1. Buka Notepad++
2. Lakukan copy paste script dibawah ini ke dalam Notepad++
<!DOCTYPE html> <html> <head> <!-- Include meta tag to ensure proper rendering and touch zooming--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Include jQuery Mobile stylesheets --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <!-- Include the jQuery library --> <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <!-- Include the jQuery Mobile library --> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1> Masukan Judul Page disini </h1> </div> <div data-role="main" class="ui-content"> <p>Masukan konten disini</p> </div> <div data-role="footer"> <h1>Masukan Teks Footer disini</h1> </div> </div> </body> </html>Code 3. Local JQuery Mobile
Contoh Penjelasan:
data-role="page" adalah page (halaman web) yang ditampilkan di browser. Sebuah elemen yang mewakili sebuah widget Handphone jQuery menggunakan attribute HTML data-role. Struktur langsung dari "page" adalah div dengan data-roles "header", "content", and "footer".
data-role="header" Membuat sebuah toolbar dibagian atas dari page (sering digunakan untuk judul atau tombol pencarian).
data-role="main" mendefinisikan isi dari page seperti teks, gambar, tombol, bentuk dan lain-lain.
"ui-content" class yang digunakan untuk menambahkan padding tambahan dan margin di dalam konten page.
data-role="footer" dibunakan untuk membuat sebuah toolbar dibawah halaman
Di dalam page ini kita dapat menambahkan elemen HTML lain seperti paragraph, images, heading, list, dan lain-lain.
3. Simpan dengan nama tutorial-part2-pages.html
4. Hasilnya dari script diatas dapat ditampilkan sebagai berikut:
Gambar 7. Hasil dari code 3
Menambahkan Pages
Di dalam JQuery Mobile kita dapat membuat beberapa page dalam satu file HTML. Kita pisahkan setiap page dengan id yang unik dan menggunakan attribut href untuk menghubungkan antar halaman:
<!DOCTYPE html> <html> <head> <!-- Include meta tag to ensure proper rendering and touch zooming--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Include jQuery Mobile stylesheets --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <!-- Include the jQuery library --> <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <!-- Include the jQuery Mobile library --> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script> </head> <body> <div data-role="page" id="pagesatu"> <div data-role="header"> <h1>Pertama</h1> </div> <div data-role="main" class="ui-content"> <a href="#pagedua">Menuju Page Kedua</a> </div> <div data-role="footer"><h1>Teks Footer</h1> </div> </div> <div data-role ="page" id="pagedua"> <div data-role="header"> <h1>Kedua</h1> </div> <div data-role="main" class="ui-content"> <a href="#pagesatu">Menuju Page Pertama</a> </div> <div data-role="footer"> <h1>Teks Footer</h1> </div> </div> </body> </html>Code 4. Code untuk menambahkan Pages
Berikut tampilannya:
Gambar 8. Hasil dari code 4
Page Sebagai Dialog
Sebuah kotak dialog adalah jenis windows yang digunakan untuk menampilkan informasi khusus atau masukan permintaan. Untuk menambahkan kotak dialog yang terbuka ketika pengguna melakukan tap pada link, kita dapat menambahkan data-dialog=”true” pada page yang ingin kita tampilkan sebagai sebuah dialog.
Berikut ini adalah tutorial membuat Page sebagai Dialog:
1. Buka Notepad++
2. Lakukan copy paste script dibawah ini ke dalam Notepad++
<!DOCTYPE html> <html> <head> <!-- Include meta tag to ensure proper rendering and touch zooming--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Include jQuery Mobile stylesheets --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <!-- Include the jQuery library --> <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <!-- Include the jQuery Mobile library --> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script> </head> <body> <div data-role="page" id="pagesatu"> <div data-role="header"><h1>SiS+</h1></div> <div data-role="main" class="ui-content"> <p> Tutorial Part 2 ini adalah bagaimana cara menampilkan kotak dialog ketika tombol diklik. </p> <a href="#pagedua">Munculkan dialog</a> </div> <div data-role="footer"><h1>Teks Footer</h1> </div> </div> <div data-role ="page" data-dialog="true" id="pagedua"> <div data-role="header"><h1>Kotak Dialog</h1> </div> <h2>Page Dialog</h2> <p>Ini adalah kotak dialog, kamu dapat membuat info disini contohnya informasi about atau informasi lainnya</p> <div data-role="main" class="ui-content"> <a href="#pagesatu">Kembali</a></div> <div data-role="footer"><h1>Teks Footer</h1></div> </div> </body> </html>Code 5. Code untuk membuat Page Dialog
3. Simpan dengan nama tutorial-part2-pages-sebagai-dialog.html
4. Hasilnya dari script diatas dapat ditampilkan sebagai berikut:
Gambar 11. Hasil dari code 5
Latihan Part 2
Kerjakan Latihan berikut ini.:Setelah mempelajari Code 3, Code 4 diatas yang dikombinasikan dengan perintah tag HTML, Buatlah halaman Home yang berisi tentang halaman Home SiS+ sesuai dengan tampilan berikut ini:
Setelah mempelajari Pages, tahap selanjutnya adalah :
pengen nanya cara memasukan video codenya seperti apa yah?
ReplyDeletesaya gak bisa jalan nih, yang pindah halaman
ReplyDelete