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.
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.).
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.
Get jQuery Mobile: Up and Running now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.