From e86b10ea559ee39338dc605ddbdc422b2888f693 Mon Sep 17 00:00:00 2001 From: toddparker Date: Sun, 13 Nov 2011 21:05:06 -0500 Subject: [PATCH] Added info on calling the list view plugin, refreshing, linked up data attar page --- docs/lists/api-lists.html | 28 ---------------------------- docs/lists/docs-lists.html | 14 ++++++++++---- 2 files changed, 10 insertions(+), 32 deletions(-) delete mode 100755 docs/lists/api-lists.html diff --git a/docs/lists/api-lists.html b/docs/lists/api-lists.html deleted file mode 100755 index b6003bbb..00000000 --- a/docs/lists/api-lists.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - jQuery Mobile Docs - Lists API - - - - - - - - - -
- -
-

List API

-
- -
- -
-
- - - \ No newline at end of file diff --git a/docs/lists/docs-lists.html b/docs/lists/docs-lists.html index 10963752..043cdd1a 100755 --- a/docs/lists/docs-lists.html +++ b/docs/lists/docs-lists.html @@ -23,7 +23,8 @@

Basic linked lists

-

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.