Home / Jquery Mobile / Tutorial JQuery Mobile Part 2: Pages

13 March 2017

Tutorial JQuery Mobile Part 2: Pages

Tutorial JQuery Mobile Part 2: Pages

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++



01<!DOCTYPE html>
02<html>
03 <head>
04<!-- Include meta tag to ensure proper rendering and touch zooming-->
05<meta name="viewport" content="width=device-width, initial-scale=1">
06<!-- Include jQuery Mobile stylesheets -->
07<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
08<!-- Include the jQuery library -->
09<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
10<!-- Include the jQuery Mobile library -->
11<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
12</script>
13</head>
14<body>
15
16<div data-role="page" id="pageone">
17<div data-role="header">
18 <h1> Masukan Judul Page disini </h1>
19</div>
20 <div data-role="main" class="ui-content">
21  <p>Masukan konten disini</p>
22 </div>
23 <div data-role="footer">
24  <h1>Masukan Teks Footer disini</h1>
25 </div> 
26</div>
27</body>
28</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:


01<!DOCTYPE html>
02<html>
03 <head>
04<!-- Include meta tag to ensure proper rendering and touch zooming-->
05<meta name="viewport" content="width=device-width, initial-scale=1">
06<!-- Include jQuery Mobile stylesheets -->
07<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
08<!-- Include the jQuery library -->
09<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
10<!-- Include the jQuery Mobile library -->
11<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
12</script>
13</head>
14<body>
15
16<div data-role="page" id="pagesatu">
17 <div data-role="header">
18  <h1>Pertama</h1>
19 </div>
20 <div data-role="main" class="ui-content">
21  <a href="#pagedua">Menuju Page Kedua</a>
22 </div>
23 <div data-role="footer"><h1>Teks Footer</h1>
24 </div>
25</div>
26<div data-role ="page" id="pagedua">
27 <div data-role="header">
28  <h1>Kedua</h1>
29 </div>
30 <div data-role="main" class="ui-content">
31  <a href="#pagesatu">Menuju Page Pertama</a>
32 </div>
33 <div data-role="footer">
34  <h1>Teks Footer</h1>
35 </div>
36</div>
37</body>
38</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++

01<!DOCTYPE html>
02<html>
03 <head>
04<!-- Include meta tag to ensure proper rendering and touch zooming-->
05<meta name="viewport" content="width=device-width, initial-scale=1">
06<!-- Include jQuery Mobile stylesheets -->
07<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
08<!-- Include the jQuery library -->
09<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
10<!-- Include the jQuery Mobile library -->
11<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
12</script>
13</head>
14<body>
15
16<div data-role="page" id="pagesatu">
17 <div data-role="header"><h1>SiS+</h1></div>
18 <div data-role="main" class="ui-content">
19  <p> Tutorial Part 2 ini adalah bagaimana cara menampilkan kotak dialog ketika tombol diklik. </p>
20 <a href="#pagedua">Munculkan dialog</a>
21 </div>
22 <div data-role="footer"><h1>Teks Footer</h1>
23 </div>
24</div>
25<div data-role ="page" data-dialog="true" id="pagedua">
26 <div data-role="header"><h1>Kotak Dialog</h1>
27 </div>
28 <h2>Page Dialog</h2>
29  <p>Ini adalah kotak dialog, kamu dapat membuat info disini contohnya informasi about atau informasi lainnya</p> 
30  <div data-role="main" class="ui-content">
31  <a href="#pagesatu">Kembali</a></div>
32 <div data-role="footer"><h1>Teks Footer</h1></div>
33</div>
34</body>
35</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:



2. Apabila di klik link Green Dragon, mana akan menuju halaman Green Dragon seperti gambar dibawah ini.




Setelah mempelajari Pages, tahap selanjutnya adalah :

Tutorial JQuery Mobile Part 2: Pages Rating: 4.5 Diposkan Oleh: Unknown

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)