|

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

  Matt Doyle is an experienced technical author and coder who has written three well-received books on jQuery Mobile, PHP and Photoshop. He has also written articles for Elated.com and SitePoint.com on a variety of topics, including jQuery Mobile, jQuery, JavaScript, PHP, HTML and CSS. Learn more about jQuery Mobile with Matt’s comprehensive eBook, “Master Mobile Web Apps with jQuery Mobile”. It’s available for instant download at http://store.elated.com/.

About Safari Books Online

Safari Books Online is an online learning library that provides access to thousands of technical, engineering, business, and digital media books and training videos. Get the latest information on topics like Windows 8, Android Development, iOS Development, Cloud Computing, HTML5, and so much more – sometimes even before the book is published or on bookshelves. Learn something new today with a free subscription to Safari Books Online.
|

2 Responses to jQuery Mobile Tip: Adding Thumbnails and Icons to List Views

  1. This is pretty straightforward code for jQM thanks for sharing. I’m still stuck on getting hi-res thumbnail images to work on retina devices.

  2. Matt says:

    @Jake: I cover creating HD (retina) icons in my book, which might help:

    http://store.elated.com/

    You can use CSS media queries to serve SD images to SD displays and HD images to HD displays – eg for icons:

    .myimage { background-image: url(SD.png); -moz-background-size: 18px 18px; -o-background-size: 18px 18px; -webkit-background-size: 18px 18px; background-size: 18px 18px; }

    @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min–moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {
    .myimage { background-image: url(HD.png); }
    }