jQuery Mobile - Listview Thumbnails

Description

In list item, the thumbnails are included on the left side. Insert the image as the first child element inside the list item.

Example

Following example demonstrates the use of thumbnails in the list in the jQuery Mobile.

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <h2>Listview Thumbnail Example</h2>
      <ul data-role = "listview" data-inset = "true">
         <li><a href = "#">
            <img src = "/jquery_mobile/images/facebook.jpg">
            <h2>Facebook</h2>
            <p>Mark Zukerburg</p></a>
         </li>
         
         <li><a href = "#">
            <img src = "/jquery_mobile/images/twitter.jpg">
            <h2>Twitter</h2>
            <p>Jack Dorsey</p></a>
         </li>
         
         <li><a href = "#">
            <img src = "/jquery_mobile/images/google.jpg">
            <h2>Google+</h2>
            <p>Google</p></a>
         </li>
      </ul>
   </body>
</html>

Output

Let's carry out the following steps to see how the above code works −

Save the above html code as listview_thumbnail.html file in your server root folder.
Open this HTML file as http://localhost/listview_thumbnail.html and the following output will be displayed.

jquery_mobile_widgets.htm

Kickstart Your Career

Get certified by completing the course

Get Started