JQuery Mobile Tutorial: Web page List component

Article Introduction: The list is also a more frequently used component in mobile development.

The list is also one of the most frequently used components in mobile development, and we use the "Ask and answer" approach to get a preliminary look at:

1, how to set the list?

Example:

<!--ListView ul start--> <ul data-role= "ListView" > 	<li> 		<a> can be added to OL or UL Data-role </a> 	</li> 	<li> 		<a> By default Li is C's theme </a> 	</li> </ul> <!- -ListView ul End-->

Icon:

Description
1, on the UL or ol set data-role= "ListView"
2, the default full screen

2. How to set up a built-in list?

Example:

<!--ListView ul start--> <ul data-role= "ListView" data-inset= "true" > 	<li> 		<a> can give OL or UL add data-inset</a> 	</li> 	<li> 		<a> By default UL is full screen </a> 	</li > 	<li> 		<a> This example to the UL set this property true</a> 	</li> </ul> <!--ListView ul End-- >

Icon:

Description
1, add data-inset= "true" property can

3, how to set the numbered list?

Example:

<!--ListView ol start--> <ol data-role= "ListView" data-inset= "true" > 	<li> 		<a> Use OL label directly </a> 	</li> 	<li> 		<a> This will generate numbered list </a> 	</li> </ Ol> <!--ListView ol End-->

Icon:

Description
1, directly use OL label can

4. How to set up a list with thumbnails?

Example:

<!--ListView ul start--> <ul data-role= "ListView" data-inset= "true" >     <li>         <a href= "http ://zhangyaochun.iteye.com ">                          
 
Icon:
 
 
Description
1, pay attention to the structure inside Li
 
5. How do I set up a read-only list?  
Example:
 
<!--ListView ul start--> <ul data-role= "ListView" data-inset= "true" > 	<li> 		 		
 
Icon:
 
 
Description
1, pay attention to Li structure, removed a package
2, mouse move into no gestures, right there is no small icon
 
Demo