Post on 16-Jan-2016
description
Sistem Mobile dan NirkabelPraktek : jQuery Mobile – Listview
STMIK Palangka Raya
Jonh Fredrik Ulysses, ST., MT
jonh.fredrik.u@gmail.com
STMIK Palangka Raya - JFU - 2014
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
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
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
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
Untuk code diatas, isi direktori akan tampak seperti berikut
STMIK Palangka Raya - JFU - 2014
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
<!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
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
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
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>
Linked
• List items with links are styled as button.
STMIK Palangka Raya - JFU - 2014
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>
• Tambahkan baris data-inset="true“ pada baris <ul data-role="listview">
STMIK Palangka Raya - JFU - 2014
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
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>
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
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>
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
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>
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
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>
Collapsible listview
• This is an example of a listviewwrapped in a container with data-role="collapsible".
STMIK Palangka Raya - JFU - 2014
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>
Tugas
• Buatlah tampilan listview
STMIK Palangka Raya - JFU - 2014