Welcome to

jQueryMobile Fundamental 4

1. Listview

2. Collapsible

3. Collapsible set

jQueryMobile

Fundamental 4

Based on http://demos.jquerymobile.com/1.4.0/

Listview : Unordered & Linked jQueryMobile Fundamental 4

A listview is coded as a simple unordered list (ul) or ordered list (ol)

with a data-role="listview"attribute and has a wide range of features.

Tab

Listview : Inset & Filter jQueryMobile Fundamental 4

Adding the data-inset="true" attribute to the list, the inset

appearance is useful for mixing a listview with other content. To

make a list filterable, add the data-filter="true" attribute to the list.

Tab

Real Content

Listview : Divider & Count jQueryMobile Fundamental 4

List items can be organize and group the list items adding the data-

role="list-divider" to any list item. To add a count indicator to the right

of the list item with a class of ‘ui-li-count’.

Listview : Icon & Thumnails jQueryMobile Fundamental 4

Set the ’data-iconattribute’ on the desired list item to the name of a standard icon. To add thumbnails to the left of a list item, simply add an image inside a list item as the first child element.

demos.jquerymobile.com/1.4.0/icons/

Collapsible jQueryMobile Fundamental 4

To create a collapsible block of content, create a container and add

the data-role="collapsible"attribute. For forms, use a fieldset and

legend for the collapsible.

Collapsible Set jQueryMobile Fundamental 4

By adding a parent wrapper with a data-role="collapsible-set" attribute,

you can make collapsible set. For full width collapsibles without

corner styling add the data-inset="false" attribute to the set.

Expand your dimension!

Let’s Start!