jQuery Mobile list view
May 21, 2021 jQuery Mobile
Table of contents
jQuery Mobile list view
jQuery Mobile list view
The list view in jQuery Mobile is a standard HTML list; O rderly (-lt;ol-gt;) and disorderly (-lt;ul-gt;).
List views are a powerful feature of jQuery Mobile. I t makes standard disordered or ordered lists more widely available. T he application method is to add the data-role"listview" property to the ul or ol tag. Add a link to each item, and users can click on it:
<li><a href="#">列表项m</a></li>
</ol>
<ul data-role="listview" >
<li><a href="#">列表项</a></li>
</ul>
Try it out . . .
The fillets and edges of the list style, set using the data-inset-"true" property:
|
By default, a link to a list item automatically becomes a button (no data-role"button" is required). |
|---|
The list is separated
List items can also be converted into list split items, which are used to organize lists and group list items.
Specify the list split, add the data-role-list-divider property to the list items.
<li data-role="list-divider" > Europe </ li>
<li><a href="#">法国</a></li>
<li><a href="#">德国</a></li>
</ul>
Try it out . . .
If you have an alphabetical list, (for example, a phone book) the data-autodividers-"true" property settings of the element can be configured to separate the automatically generated items:
<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 out . . .
|
Data-autodividers "true" can be configured as the separation of automatically generated items. By default, the separated text you create is the first capital letter of the list item text. |
|---|
Search filtering
jquery Mobile provides a very simple way to implement client search capabilities and filter the options for lists. Simply add the data-filter"true" property:
By default, the default character for the search input box is "Filter items..."
You can set the default character for the search input box by setting the binding program for the mobileinit event or by setting a string for the $.mobile.listview.prototype.options.filterPlaceholder option, or by setting the data-filter-placeholder property for the list:
Try it out . . .
More instances
Read-only list
How to create a list without a link (not a button and not clickable).