5.JQuery Mobile Listview

Sistem Mobile dan NirkabelPraktek : jQuery Mobile – Listview

STMIK Palangka Raya

Jonh Fredrik Ulysses, ST., MT

[email protected]

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.


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.


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.


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:


Untuk code diatas, isi direktori akan tampak seperti berikut


Read-only, unordered

• A listview is a simple unordered list containing linked list items with a data-role="listview" attribute.


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


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.


Linked

• List items with links are styled as button.


• Tambahkan baris data-inset="true“ pada baris <ul data-role="listview">


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.


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.


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.


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.


Collapsible listview

• This is an example of a listviewwrapped in a container with data-role="collapsible".


Tugas

• Buatlah tampilan listview


5.JQuery Mobile Listview

Documents

Transcript of 5.JQuery Mobile Listview