jQuery Mobile - Listview vinculado

Descripción

Cuando se define un hipervínculo en la lista, se le aplica el estilo de un botón.

Ejemplo

El siguiente ejemplo demuestra el uso de la lista vinculada en 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 Linked Example</h2>
      <ul data-role = "listview">
         <li><a href = "#">Chennai</a></li>
         <li><a href = "#">Bangalore</a></li>
         <li><a href = "#">Pune</a></li>
         <li><a href = "#">Mumbai</a></li>
         <li><a href = "#">Delhi</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_linked.html archivo en la carpeta raíz de su servidor.

  • Abra este archivo HTML como http: //localhost/listview_linked.html y se mostrará el siguiente resultado.