HTML5 developing mobile Web Apps-jquery Mobile (2)-list

Jquery Mobile provides a build list of Data-view, which is a ListView. Here is a typical jquery mobile list with the following code:

<div data-role= "page" id= "Pageone" > <div data-role= "Content" >   
 Above we have defined two types of lists, one is the sequence list (UL), the other is the non-sequential list (OL). The two lists are defined in the same way as HTML, as long as you add the data-role= "ListView" attribute to the corresponding label.
On top of these basic features, we can continue to add jquery Mobile to provide us with custom style or functionality. In the following code we use the Data-inset property to add fillets and margins to the list:
<ul data-role= "ListView" data-inset= "true" >
 We often see a list of things that are grouped together, that is, the options for the same list are placed under the same headline. Jquery Mobile also provides us with a simple build for this function, List-divider:
<ul data-role= "ListView" > <li data-role= "List-divider" > Europe </li> <li><a href= "#" > France < /a></li> <li><a href= "#" > Germany </a></li></ul>
You can set automatic sorting, for example, all letters can be automatically sorted by Autodividers, and the code is as follows:
<ul data-role= "ListView" data-autodividers= "true" > <li><a href= "#" >Adam</a></li> < Li><a href= "#" >Angela</a></li> <li><a href= "#" >Bill</a></li> <li ><a href= "#" >Calvin</a></li>  ...</ul>
If we want to add search functionality to the list, you can set the Data-filter property to True so that the list automatically displays the results of the deletion, based on the information entered by the user. With this companion Data-filter-placeholder you can set the default placeholder for the search box:
<ul data-role= "ListView" Data-filter= "true" data-filter-placeholder= "Search Name" >
In jquery Mobile, when we add a picture to the list, the picture automatically adapts to the size of the list and becomes 80*80 pixels, with the following code:
<ul data-role= "ListView" > <li><a href= "#" ></a></li></ Ul>
If you want to use 16*16PX's small icon, add Ui-li-icon on the IMG class:
<li><a href= "#" >USA</a></li>
Finally, now the number of popular list on the mobile phone hint effect, also can be implemented through jquery Mobile, the code is as follows:
<ul data-role= "ListView" > <li><a href= "#" >inbox<spanclass= "Ui-li-count" >335</span> </a></li> <li><a href= "#" >sent<spanclass= "Ui-li-count" >123</span></a> </li> <li><a href= "#" >trash<spanclass= "Ui-li-count" >7</span></a></li> </ul>


HTML5 developing mobile Web Apps-jquery Mobile (2)-list