jQuery Mobile Tip: Adding Thumbnails and Icons to List Views
In the jQuery Mobile: Getting the Most from List Views post I introduced list views in jQuery Mobile, but now let’s go a little further.
jQuery Mobile list views are very flexible when it comes to styling and customization. For example, you can easily add an 80×80-pixel thumbnail or a 16×16-pixel icon image to each item in a list view. This can make list views more attractive, as well as give the user some useful information about each item.
To add a thumbnail image to an item in a list view, just add an img element as the first child element inside the item’s
li element. (If the
li contains a link then the
img element should be the first child element inside the link.) For example:
<li> <a href="#"> <img src="thumbnails/australia.jpg" alt="Australia"> Australia </a> </li>
To add an icon instead of a thumbnail, give the img element a CSS class of ui-li-icon, like this:
<li> <a href="#"> <img src="icons/buy.png" alt="Buy" class="ui-li-icon"> Buy Now </a> </li>
This figure shows an example of both thumbnails and icons in a list view:
You should now have a better idea of how to add thumbnails and icons to list views in your jQuery Mobile apps.
Safari Books Online has the content you need
Here are some good jQuery Mobile resources found in Safari Books Online. If you don’t have subscription access to Safari Books Online, you can start with a free trial.
|Sams Teach Yourself jQuery Mobile in 24 Hours will help you master the latest version of jQuery Mobile, even if you have no previous experience. You will be guided through every step of creating and customizing a mobile website with jQuery Mobile.|
|Head First Mobile Web walks you through the process of making a conventional website work on a variety smartphones and tablets (look in chapter 6 to build an example with jQuery Mobile).|
|HTML5 Mobile Development Cookbook will show you how to plan, build, debug and optimize mobile websites.|
Start FREE 10-day trial.
About the Author