Pro jQuery Mobile

Lists with Thumbnails and Icons

We can add thumbnails to the left of our list item by adding an image inside a list item as the first child element (see Figure 5–5 and its related code in Listing 5–4). The framework will scale the image to 80 pixels square.

Figure 5–5. List with thumbnails

Listing 5–4. List with thumbnails (ch5/list-thumbnails.html)

<ul data-role="listview">     <li>           <a href="movies/kung-fu-panda.html">                 <img src="images/kungfupanda2.jpg" />                 <h3>Kung Fu Panda</h3>                 <p>Rated: PG</p>                 <p>Runtime: 95 min.</p>           </a>     </li>     ... </ul>

We can ...