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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.