jQuery Mobile: miniaturas de Listview

Descripción

En el elemento de la lista, las miniaturas se incluyen en el lado izquierdo. Inserte la imagen como el primer elemento secundario dentro del elemento de la lista.

Ejemplo

El siguiente ejemplo demuestra el uso de miniaturas en la lista de jQuery Mobile.

<!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>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como listview_thumbnail.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/listview_thumbnail.html y se mostrará el siguiente resultado.

↰ Previous page