5.JQuery Mobile Listview
-
Upload
meiko-sangalang -
Category
Documents
-
view
18 -
download
1
description
Transcript of 5.JQuery Mobile Listview
![Page 1: 5.JQuery Mobile Listview](https://reader034.fdokumen.com/reader034/viewer/2022051001/55cf8f02550346703b97fdea/html5/thumbnails/1.jpg)
Sistem Mobile dan NirkabelPraktek : jQuery Mobile – Listview
STMIK Palangka Raya
Jonh Fredrik Ulysses, ST., MT
STMIK Palangka Raya - JFU - 2014
![Page 2: 5.JQuery Mobile Listview](https://reader034.fdokumen.com/reader034/viewer/2022051001/55cf8f02550346703b97fdea/html5/thumbnails/2.jpg)
Listview
•Listview adalah sebuah kode sederhana untuk menampilkan daftar list yang tidak teratur (ul) atau daftar yang teratur (ol) dengan menggunakan data-role=“listview” dan memiliki fitur lebar sisi.
STMIK Palangka Raya - JFU - 2014
![Page 3: 5.JQuery Mobile Listview](https://reader034.fdokumen.com/reader034/viewer/2022051001/55cf8f02550346703b97fdea/html5/thumbnails/3.jpg)
Persiapan
1. Siapkan web server seperti XAMPP.
2. Download jQueryMobile di http://jquerymobile.com/download dan ekstrak ke localhost .
3. Siapkan web browser yang mendukung.
STMIK Palangka Raya - JFU - 2014
![Page 4: 5.JQuery Mobile Listview](https://reader034.fdokumen.com/reader034/viewer/2022051001/55cf8f02550346703b97fdea/html5/thumbnails/4.jpg)
Cara Pemanggilan jQuery Mobile
1. File css dan js jQuery Mobile sendiri sebenarnya tidak perlu di-download karena dapat digunakan melalui CDN (Content Delivery Network). Contoh deklarasinya adalah sebagai berikut:
Kelebihan menggunakan CDN adalah jika browser telah memiliki cache file maka tidak perlu ada proses download sehingga lebih cepat.
STMIK Palangka Raya - JFU - 2014
![Page 5: 5.JQuery Mobile Listview](https://reader034.fdokumen.com/reader034/viewer/2022051001/55cf8f02550346703b97fdea/html5/thumbnails/5.jpg)
2. Tetapi jika anda mengembangkan web app secara lokal dalamkondisi sering tidak terkoneksi dengan internet, maka copy jquery.mobile-1.2.0.min.js, jquery.mobile-1.2.0.min.css dandirektori /image hasil download ke direktori tempat web app. Contoh deklarasi dengan file lib diletakkan pada direktori yang samadengan file html-nya adalah sebagai berikut:
STMIK Palangka Raya - JFU - 2014
![Page 6: 5.JQuery Mobile Listview](https://reader034.fdokumen.com/reader034/viewer/2022051001/55cf8f02550346703b97fdea/html5/thumbnails/6.jpg)
Untuk code diatas, isi direktori akan tampak seperti berikut
STMIK Palangka Raya - JFU - 2014
![Page 7: 5.JQuery Mobile Listview](https://reader034.fdokumen.com/reader034/viewer/2022051001/55cf8f02550346703b97fdea/html5/thumbnails/7.jpg)
Read-only, unordered
• A listview is a simple unordered list containing linked list items with a data-role="listview" attribute.
STMIK Palangka Raya - JFU - 2014
![Page 8: 5.JQuery Mobile Listview](https://reader034.fdokumen.com/reader034/viewer/2022051001/55cf8f02550346703b97fdea/html5/thumbnails/8.jpg)
<!DOCTYPE html><html><head>
<meta charset="utf-8"><title>Modul 2 - Read-only, unordered</title><link href="../jqm/jquery.mobile-1.4.4.min.css" rel="stylesheet"
type="text/css" /><script src="../jqm/jquery.min.js"
type="text/javascript"></script><script src="../jqm/jquery.mobile-1.4.4.min.js"
type="text/javascript"></script></head><body><div data-role="page" id="indexPage" data-theme="a">
<div data-role="header" data-position="fixed" data-theme="b"><h1>Read-only, unordered</h1>
</div>
<div role="main" class="ui-content"><ul data-role="listview">
<li>Algoritma Pemrograman</li><li>Pengantar Teknologi Informasi</li><li>Pemrograman Web</li><li>Grafika Komputer</li><li>Aplikasi Wireless Mobile</li>
</ul></div><div data-role="footer" data-position="fixed" data-theme="b">
<h1>STMIK Palangka Raya<h1></div>
</div></body></html>
STMIK Palangka Raya - JFU - 2014
![Page 9: 5.JQuery Mobile Listview](https://reader034.fdokumen.com/reader034/viewer/2022051001/55cf8f02550346703b97fdea/html5/thumbnails/9.jpg)
Read-only, ordered
• Lists can also be created from ordered lists (ol) which is useful when presenting items that are in a sequence such as search results or a movie queue.
STMIK Palangka Raya - JFU - 2014
![Page 10: 5.JQuery Mobile Listview](https://reader034.fdokumen.com/reader034/viewer/2022051001/55cf8f02550346703b97fdea/html5/thumbnails/10.jpg)
Read-only, ordered
• Lists can also be created from ordered lists (ol) which is useful when presenting items that are in a sequence such as search results or a movie queue.
STMIK Palangka Raya - JFU - 2014
![Page 11: 5.JQuery Mobile Listview](https://reader034.fdokumen.com/reader034/viewer/2022051001/55cf8f02550346703b97fdea/html5/thumbnails/11.jpg)
STMIK Palangka Raya - JFU - 2014
<!DOCTYPE html><html><head>
<meta charset="utf-8"><title>Modul 2 - Read-only, ordered</title><link href="../jqm/jquery.mobile-1.4.4.min.css" rel="stylesheet"
type="text/css" /><script src="../jqm/jquery.min.js"
type="text/javascript"></script><script src="../jqm/jquery.mobile-1.4.4.min.js"
type="text/javascript"></script></head><body><div data-role="page" id="indexPage" data-theme="a">
<div data-role="header" data-position="fixed" data-theme="b"><h1>Read-only, ordered</h1>
</div>
<div role="main" class="ui-content"><ol data-role="listview">
<li>Algoritma Pemrograman</li><li>Pengantar Teknologi Informasi</li><li>Pemrograman Web</li><li>Grafika Komputer</li><li>Aplikasi Wireless Mobile</li>
</ol></div><div data-role="footer" data-position="fixed" data-theme="b">
<h1>STMIK Palangka Raya<h1></div>
</div></body></html>
![Page 12: 5.JQuery Mobile Listview](https://reader034.fdokumen.com/reader034/viewer/2022051001/55cf8f02550346703b97fdea/html5/thumbnails/12.jpg)
Linked
• List items with links are styled as button.
STMIK Palangka Raya - JFU - 2014
![Page 13: 5.JQuery Mobile Listview](https://reader034.fdokumen.com/reader034/viewer/2022051001/55cf8f02550346703b97fdea/html5/thumbnails/13.jpg)
STMIK Palangka Raya - JFU - 2014
<!DOCTYPE html><html><head>
<meta charset="utf-8"><title>Modul 2 - Linked</title><link href="../jqm/jquery.mobile-1.4.4.min.css" rel="stylesheet"
type="text/css" /><script src="../jqm/jquery.min.js"
type="text/javascript"></script><script src="../jqm/jquery.mobile-1.4.4.min.js"
type="text/javascript"></script></head><body><div data-role="page" id="indexPage" data-theme="a">
<div data-role="header" data-position="fixed" data-theme="b"><h1>Linked</h1>
</div>
<div role="main" class="ui-content"><ul data-role="listview">
<li><a href="#">Algoritma Pemrograman</a></li><li><a href="#">Pengantar Teknologi
Informasi</a></li><li><a href="#">Pemrograman Web</a></li><li><a href="#">Grafika Komputer</a></li><li><a href="#">Aplikasi Wireless Mobile</a></li>
</ul> </div><div data-role="footer" data-position="fixed" data-theme="b">
<h1>STMIK Palangka Raya<h1></div>
</div></body></html>
![Page 14: 5.JQuery Mobile Listview](https://reader034.fdokumen.com/reader034/viewer/2022051001/55cf8f02550346703b97fdea/html5/thumbnails/14.jpg)
• Tambahkan baris data-inset="true“ pada baris <ul data-role="listview">
STMIK Palangka Raya - JFU - 2014
![Page 15: 5.JQuery Mobile Listview](https://reader034.fdokumen.com/reader034/viewer/2022051001/55cf8f02550346703b97fdea/html5/thumbnails/15.jpg)
Filter
• To make a list filterable, simply add the data-filter="true" attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don't contain the current search string as the user types. The input's placeholder text defaults to "Filter items...". To configure the placeholder text in the search input, use the data-filter-placeholder attribute. By default the search box will inherit its theme from its parent. The search box theme can be configured using the data attribute data-filter-theme on your listview.
STMIK Palangka Raya - JFU - 2014
![Page 16: 5.JQuery Mobile Listview](https://reader034.fdokumen.com/reader034/viewer/2022051001/55cf8f02550346703b97fdea/html5/thumbnails/16.jpg)
STMIK Palangka Raya - JFU - 2014
<!DOCTYPE html><html><head>
<meta charset="utf-8"><title>Modul 2 - Filter</title><link href="../jqm/jquery.mobile-1.4.4.min.css" rel="stylesheet"
type="text/css" /><script src="../jqm/jquery.min.js"
type="text/javascript"></script><script src="../jqm/jquery.mobile-1.4.4.min.js"
type="text/javascript"></script></head><body><div data-role="page" id="indexPage" data-theme="a">
<div data-role="header" data-position="fixed" data-theme="b"><h1>Filter</h1>
</div>
<div role="main" class="ui-content"><ul data-role="listview" data-
filter="true" data-filter-placeholder="Search fruits..." data-inset="true"><li><a href="#">Apple</a></li><li><a href="#">Banana</a></li><li><a href="#">Cherry</a></li><li><a href="#">Cranberry</a></li><li><a href="#">Grape</a></li><li><a href="#">Orange</a></li>
</ul></div><div data-role="footer" data-position="fixed" data-theme="b">
<h1>STMIK Palangka Raya<h1></div>
</div></body></html>
![Page 17: 5.JQuery Mobile Listview](https://reader034.fdokumen.com/reader034/viewer/2022051001/55cf8f02550346703b97fdea/html5/thumbnails/17.jpg)
List dividers
• List items can be turned into dividers to organize and group the list items. This is done by adding the data-role="list-divider" to any list item. These items are styled with the bar swatch "b" by default (blue in the default theme) but you can specify a theme for dividers by adding the data-divider-theme attribute to the list element (ul or ol) and specifying a theme swatch letter. You can override the divider-theme for a specific divider by adding the data-theme attribute to the list item.
STMIK Palangka Raya - JFU - 2014
![Page 18: 5.JQuery Mobile Listview](https://reader034.fdokumen.com/reader034/viewer/2022051001/55cf8f02550346703b97fdea/html5/thumbnails/18.jpg)
STMIK Palangka Raya - JFU - 2014
<!DOCTYPE html><html><head>
<meta charset="utf-8"><title>Modul 2 - Filter</title><link href="../jqm/jquery.mobile-1.4.4.min.css" rel="stylesheet"
type="text/css" /><script src="../jqm/jquery.min.js"
type="text/javascript"></script><script src="../jqm/jquery.mobile-1.4.4.min.js"
type="text/javascript"></script></head><body><div data-role="page" id="indexPage" data-theme="a">
<div data-role="header" data-position="fixed" data-theme="b"><h1>Filter</h1>
</div>
<div role="main" class="ui-content"><ul data-role="listview" data-
inset="true" data-divider-theme="a"><li data-role="list-divider">Mail</li><li><a href="#">Inbox</a></li><li><a href="#">Outbox</a></li><li data-role="list-divider">Contacts</li><li><a href="#">Friends</a></li><li><a href="#">Work</a></li>
</ul></div><div data-role="footer" data-position="fixed" data-theme="b">
<h1>STMIK Palangka Raya<h1></div>
</div></body></html>
![Page 19: 5.JQuery Mobile Listview](https://reader034.fdokumen.com/reader034/viewer/2022051001/55cf8f02550346703b97fdea/html5/thumbnails/19.jpg)
Count bubbles
• To add a count indicator to the right of the list item, wrap the number in an element with a class of ui-li-count. The theme for count bubbles can be set by adding the data-count-theme to the list and specifying a swatch letter.
STMIK Palangka Raya - JFU - 2014
![Page 20: 5.JQuery Mobile Listview](https://reader034.fdokumen.com/reader034/viewer/2022051001/55cf8f02550346703b97fdea/html5/thumbnails/20.jpg)
STMIK Palangka Raya - JFU - 2014
<!DOCTYPE html><html><head>
<meta charset="utf-8"><title>Modul 2 - Count bubbles</title><link href="../jqm/jquery.mobile-1.4.4.min.css" rel="stylesheet"
type="text/css" /><script src="../jqm/jquery.min.js"
type="text/javascript"></script><script src="../jqm/jquery.mobile-1.4.4.min.js"
type="text/javascript"></script></head><body><div data-role="page" id="indexPage" data-theme="a">
<div data-role="header" data-position="fixed" data-theme="b"><h1>Count bubbles</h1>
</div>
<div role="main" class="ui-content"><ul data-role="listview" data-count-theme="b"
data-inset="true"><li><a href="#">Inbox <span class="ui-li-
count">12</span></a></li><li><a href="#">Outbox <span class="ui-li-
count">0</span></a></li><li><a href="#">Drafts <span class="ui-li-
count">4</span></a></li><li><a href="#">Sent <span class="ui-li-
count">328</span></a></li><li><a href="#">Trash <span class="ui-li-
count">62</span></a></li></ul>
</div><div data-role="footer" data-position="fixed" data-theme="b">
<h1>STMIK Palangka Raya<h1></div>
</div></body></html>
![Page 21: 5.JQuery Mobile Listview](https://reader034.fdokumen.com/reader034/viewer/2022051001/55cf8f02550346703b97fdea/html5/thumbnails/21.jpg)
Thumbnails
• To add thumbnails to the left of a list item, simply add an image inside a list item as the first child element. The framework will scale the image to 80 pixels square.
STMIK Palangka Raya - JFU - 2014
![Page 22: 5.JQuery Mobile Listview](https://reader034.fdokumen.com/reader034/viewer/2022051001/55cf8f02550346703b97fdea/html5/thumbnails/22.jpg)
STMIK Palangka Raya - JFU - 2014
<!DOCTYPE html><html><head>
<meta charset="utf-8"><title>Modul 2 - Thumbnails</title><link href="../jqm/jquery.mobile-1.4.4.min.css" rel="stylesheet"
type="text/css" /><script src="../jqm/jquery.min.js"
type="text/javascript"></script><script src="../jqm/jquery.mobile-1.4.4.min.js"
type="text/javascript"></script></head><body><div data-role="page" id="indexPage" data-theme="a">
<div data-role="header" data-position="fixed" data-theme="b"><h1>Thumbnails</h1>
</div>
<div role="main" class="ui-content"><ul data-role="listview" data-inset="true">
<li><a href="#"><img src="img/album-bb.jpg">
<h2>Broken Bells</h2><p>Broken Bells</p></a></li><li><a href="#">
<img src="img/album-hc.jpg"><h2>Warning</h2><p>Hot Chip</p></a></li><li><a href="#">
<img src="img/album-p.jpg"><h2>Wolfgang Amadeus Phoenix</h2><p>Phoenix</p></a></li>
</ul></div><div data-role="footer" data-position="fixed" data-theme="b">
<h1>STMIK Palangka Raya<h1></div>
</div></body></html>
![Page 23: 5.JQuery Mobile Listview](https://reader034.fdokumen.com/reader034/viewer/2022051001/55cf8f02550346703b97fdea/html5/thumbnails/23.jpg)
Collapsible listview
• This is an example of a listviewwrapped in a container with data-role="collapsible".
STMIK Palangka Raya - JFU - 2014
![Page 24: 5.JQuery Mobile Listview](https://reader034.fdokumen.com/reader034/viewer/2022051001/55cf8f02550346703b97fdea/html5/thumbnails/24.jpg)
STMIK Palangka Raya - JFU - 2014
<!DOCTYPE html><html><head>
<meta charset="utf-8"><title>Modul 2 - Collapsible listview</title><link href="../jqm/jquery.mobile-1.4.4.min.css" rel="stylesheet"
type="text/css" /><script src="../jqm/jquery.min.js"
type="text/javascript"></script><script src="../jqm/jquery.mobile-1.4.4.min.js"
type="text/javascript"></script></head><body><div data-role="page" id="indexPage" data-theme="a">
<div data-role="header" data-position="fixed" data-theme="b"><h1>Collapsible listview</h1>
</div>
<div role="main" class="ui-content"><div data-role="collapsible" data-theme="b" data-
content-theme="b"><h2>Choose a car model...</h2>
<ul data-role="listview" data-filter="true"><li><a href="#">Acura</a></li><li><a href="#">Audi</a></li><li><a href="#">BMW</a></li><li><a href="#">Cadillac</a></li><li><a href="#">Chrysler</a></li><li><a href="#">Dodge</a></li><li><a href="#">Ferrari</a></li><li><a href="#">Ford</a></li><li><a href="#">GMC</a></li><li><a href="#">Honda</a></li>
</ul></div>
</div><div data-role="footer" data-position="fixed" data-theme="b">
<h1>STMIK Palangka Raya<h1></div>
</div></body></html>
![Page 25: 5.JQuery Mobile Listview](https://reader034.fdokumen.com/reader034/viewer/2022051001/55cf8f02550346703b97fdea/html5/thumbnails/25.jpg)
Tugas
• Buatlah tampilan listview
STMIK Palangka Raya - JFU - 2014