A list view is coded as a simple unordered list containing linked list items with a data-role="listview" attribute. jQuery Mobile will apply all the necessary styles to transform the list into a mobile-friendly list view with right arrow indicator that fills the full width of the browser window. When you tap on the list item, the framework will trigger a click on the first link inside the list item, issue an AJAX request for the URL in the link, create the new page in the DOM, then kick off a page transition. Here is the HTML markup for a basic linked list.
A list view is coded as a simple unordered list containing linked list items with a data-role="listview" attribute. jQuery Mobile will apply all the necessary styles to transform the list into a mobile-friendly list view with right arrow indicator that fills the full width of the browser window. When you tap on the list item, the framework will trigger a click on the first link inside the list item, issue an AJAX request for the URL in the link, create the new page in the DOM, then kick off a page transition. View the data attribute reference to see all the possible attributes you can add to listviews.
Here is the HTML markup for a basic linked list.
<ul data-role="listview" data-theme="g">
@@ -47,7 +48,7 @@
Numbered list example
Read-only lists
- List views can also be used to display a non-interactive list of items, usually as an inset list. This list is built from an unordered or ordered list that don't have linked list items. The framework defaults to styling these list with the "c" theme swatch (flat white in the default theme) and sets the text size to a smaller size than the clickable lists to save a bit of space.
+ List views can also be used to display a non-interactive list of items, usually as an inset list. This list is built from an unordered or ordered list that don't have linked list items. The framework defaults to styling these list with the "c" theme swatch and sets the text size to a smaller size than the clickable lists to save a bit of space.
Read-only list example
@@ -101,10 +102,15 @@ function( text, searchValue ){
Inset list example
+ Calling the listview plugin
+ You can directly call the listview plugin on any selector, just like any jQuery plugin:
+ $('#mylist').listview();
+
Updating lists
- If you add items to a listview, you'll need to call the refresh() method on it to update the styles and create any nested lists that are added. For example, $('ul').listview('refresh');
+ If you add items to a listview, you'll need to call the refresh() method on it to update the styles and create any nested lists that are added. For example:
+ $('#mylist').listview('refresh');
- We're currently working on a few improvements to the refresh method, so keep your eye on Github for updates.
+ Note that the refresh() method only affects new nodes appended to a list. This is done for performance reasons. Any list items already enhanced will be ignored by the refresh process. This means that if you change the contents or attributes on an already enhanced list item, these won't be reflected. If you want a list item to be updated, replace it with fresh markup before calling refresh.