JQUERY MOBILE (2) : Konsep Multiple Page, Satu File Banyak Halaman

0 0 Senin, 06 Maret 2023

  JQUERY MOBILE MULTIPLE PAGE Pada pembuatan web, biasanya setiap halaman akan diwakili oleh sebuah file. Jika ingin membuat 5 halaman, maka...

 

JQUERY MOBILE MULTIPLE PAGE

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 pembuatan Hello World Berikut adalah kodenya.
  1. <!DOCTYPE html>
  2. <html lang="ID">
  3. <head>
  4. <title>Kerangka Dokumen Halaman jQuery Mobile</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  9. <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
  10. <script src="jquery-1.11.1.min.js"></script>
  11. <script src="jquery.mobile-1.4.5.min.js"></script>
  12. </head>
  13. <body>
  14. <!-- START Definisikan sebagai Halaman {page} -->
  15. <div data-role="page">
  17. <!-- Membuat Header -->
  18. <header data-role="header">
  19. <h1>Belajar Web Mobile</h1>
  20. </header>
  22. <!-- Bagian ISI (Konten web) -->
  23. <div data-role="content">
  24. Membuat Halaman Web Mobile menggunakan jQuery Mobile
  25. </div>
  27. <!-- Membuat Footer -->
  28. <footer data-role="footer" data-position="fixed">
  29. <h2>Madani G</h2>
  30. </footer>
  32. </div>
  33. <!-- END -->
  34. </body>
  35. </html>
Tampilan :





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:
  1. <!-- definisi halaman 1 -->
  2. <div data-role="page" id="halaman1">
  3. <header data-role="header">
  4. <h1>Header 1</h1>
  5. </header>
  6. <div data-role="content">
  7. <p>Halaman 1</p>
  8. </div>
  9. <footer data-role="footer" data-position="fixed">
  10. <h2>Footer 1</h2>
  11. </footer>
  12. </div>
  14. <!-- definisi halaman 2 -->
  15. <div data-role="page" id="halaman2">
  16. <header data-role="header">
  17. <h1>Header 2</h1>
  18. </header>
  19. <div data-role="content">
  20. <p>Halaman 2</p>
  21. </div>
  22. <footer data-role="footer" data-position="fixed">
  23. <h2>Footer 2</h2>
  24. </footer>
  25. </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:
  1. <!-- definisi halaman 1 -->
  2. <div data-role="page" id="halaman1">
  3. <header data-role="header">
  4. <h1>Header 1</h1>
  5. </header>
  6. <div data-role="content">
  7. <p>Halaman 1</p>
  8. <p>Pindah ke <a href="#halaman2">halaman 2</a></p>
  9. </div>
  10. <footer data-role="footer" data-position="fixed">
  11. <h2>Footer 1</h2>
  12. </footer>
  13. </div>
  15. <!-- definisi halaman 2 -->
  16. <div data-role="page" id="halaman2">
  17. <header data-role="header">
  18. <h1>Header 2</h1>
  19. </header>
  20. <div data-role="content">
  21. <p>Halaman 2</p>
  22. <p>Kembali ke <a href="#halaman1">halaman 1</a></p>
  23. </div>
  24. <footer data-role="footer" data-position="fixed">
  25. <h2>Footer 2</h2>
  26. </footer>
  27. </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.
  1. <!DOCTYPE html>
  2. <html lang="ID">
  3. <head>
  4. <title>Multiple Page</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  9. <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
  10. <script src="jquery-1.11.1.min.js"></script>
  11. <script src="jquery.mobile-1.4.5.min.js"></script>
  12. </head>
  13. <body>
  15. <!-- definisi halaman 1 -->
  16. <div data-role="page" id="halaman1">
  17. <header data-role="header">
  18. <h1>Header 1</h1>
  19. </header>
  20. <div data-role="content">
  21. <p>Halaman 1</p>
  22. <p>Pindah ke <a href="#halaman2">halaman 2</a></p>
  23. </div>
  24. <footer data-role="footer" data-position="fixed">
  25. <h2>Footer 1</h2>
  26. </footer>
  27. </div>
  29. <!-- definisi halaman 2 -->
  30. <div data-role="page" id="halaman2">
  31. <header data-role="header">
  32. <h1>Header 2</h1>
  33. </header>
  34. <div data-role="content">
  35. <p>Halaman 2</p>
  36. <p>Kembali ke <a href="#halaman1">halaman 1</a></p>
  37. </div>
  38. <footer data-role="footer" data-position="fixed">
  39. <h2>Footer 2</h2>
  40. </footer>
  41. </div>
  43. </body>
  44. </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).

Tags:

SHARE:

Twitter Facebook Google Pinterest

COMMENTS

BLOGGER
DISQUS
Nama

Bisnis,3,Hiburan,34,Olahraga,1,Teknologi,29,
ltr
item
Portal Trending: JQUERY MOBILE (2) : Konsep Multiple Page, Satu File Banyak Halaman
JQUERY MOBILE (2) : Konsep Multiple Page, Satu File Banyak Halaman
https://1.bp.blogspot.com/-W9WKdtaWY6g/X5RZR1ML6EI/AAAAAAAABJs/1Seqw1BUmdch-OvobiTkKi61hfb7r1qLQCLcBGAsYHQ/s320/Screenshot_3.png
https://1.bp.blogspot.com/-W9WKdtaWY6g/X5RZR1ML6EI/AAAAAAAABJs/1Seqw1BUmdch-OvobiTkKi61hfb7r1qLQCLcBGAsYHQ/s72-c/Screenshot_3.png
Portal Trending
https://www.portaltrending.com/2020/10/jquery-mobile-2-konsep-multiple-page.html
https://www.portaltrending.com/
https://www.portaltrending.com/
https://www.portaltrending.com/2020/10/jquery-mobile-2-konsep-multiple-page.html
true
6948771718050155073
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content