jQuery Mobile - Estilo de filtro

Descripción

Puede establecer un tema específico para el campo de texto usando data-filter-theme y también proporcionar un marcador de posición mediante data-filter-placeholder.

Además, el widget proporcionará las opciones de sincronización, que se compartirán entre el widget del textinput y el widget cuyos hijos filtra. Esto asegura que el valor de la opción del widget textinput sea el mismo que el valor de la opción del widget.

Por ejemplo, siempre que se establezca data-inset = "true" en la vista de lista, el widget de entrada de texto correspondiente también se insertará.

Ejemplo

El siguiente ejemplo demuestra el uso del estilo de filtro en jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <title>Filter Styling</title>
      <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>
      <ul data-role = "listview" data-filter = "true" 
         data-filter-placeholder = "Find cars..." data-filter-theme = "a" 
         data-inset = "true">
         <li>Audi</li>
         <li>BMW</li>
         <li>Ford</li>
         <li>Hyundai</li>
         <li>Mahindra</li>
         <li>porsche</li>
         <li>Renault</li>
         <li>Toyota</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 filterable_styling.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/filterable_styling.html y se mostrará el siguiente resultado.

↰ Previous page