jQuery Mobile: Up and Running

Using Images

In each row we can define one image to graphically identify the item. There are two different kinds of images we can add to every row: icons and thumbnails.

Row Icons

A row icon is an image shown at the left side of the row’s title. Don’t confuse the row icon with the right arrow on interactive rows or with the split rows’s icon.

An icon is a 16×16-pixel image inside the li element, with the class ui-li-icon defined. For example:

<li>
   <img src="/icons/email.png" class="ul-li-icon">
   Send by e-mail

Icons are usually used for action lists, for example, for a list showing multiple actions we can do with a record (delete, edit, share by email, share in a social network, etc.).

Thumbnails

A thumbnail is an 80×80-pixel image that is also positioned at the left of the text. They are preferred to icons when we are showing photos, pictures, or other graphical information attached to each item.

Thumbnails are usually used for lists showing database records, such as friends, books, DVDs, cities, etc.

A thumbnail is defined as an image inside the list item. It doesn’t need any special class defined:

<li>
   <img src="/thumb/washington.png">
   George Washington

Let’s see icons and thumbnails in action in two inset lists at Figure 4-12.

Figure 4-12. A picture worth millions; that is why we can add icons and thumbnails to every list row