Latest web development tutorials

jQuery Mobile List View



jQuery Mobile List View

jQuery Mobile in the list view is a standard HTML list; ordered (<ol>) and unordered (<ul>).

JQuery Mobile in the list view is a powerful feature. It will make a standard unordered or ordered list more widely. Application of the method is to add data-role = "listview" property ul or ol tag. Add a link on each item (<li>), the user can click on it:

Examples

<ol data-role="listview" >
<li><a href="#">列表项m</a></li>
</ol>

<ul data-role="listview" >
<li><a href="#">列表项</a></li>
</ul>

try it"

List style and rounded edges, the use of data-inset = "true" attribute set:

Examples

<ul data-role="listview" data-inset="true" >

try it"

lamp By default, the linked list item automatically becomes a button (no data-role = "button").


Delimited list

List items can be turned into a list item split, to organize lists, list items into groups.

Specified list segmentation, to list item <li> element to add data-role = "list-divider" property:

Examples

<ul data-role="listview">
<li data-role="list-divider" >欧洲</li>
<li><a href="#">法国</a></li>
<li><a href="#">德国</a></li>
</ul>

try it"

If you have an alphabetical list (such as a phone book) by <ol> or <ul> element data-autodividers = "true" attribute set can be configured to automatically generate project partition:

Examples

<ul data-role="listview" data-autodividers="true" >
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Calvin</a></li>
...
</ul>

try it"

lamp data-autodividers = "true" can be configured to automatically generate the separated items. By default, delimited text to create a capital letter is the first list item text.

Examples

More examples

Read-only list
How to create a list without links (not a button is not clickable).

panel
How to insert panel in the list