En este artículo, aprenderemos a diseñar un widget filtrable para la interfaz de usuario de aplicaciones móviles utilizando el complemento de barra de filtro jQuery. El complemento funciona con muchos controles HTML como seleccionar, botones, tablas, grupos de control.
Descargue los archivos precompilados necesarios desde este enlace y guárdelos en su carpeta de trabajo para la implementación de los siguientes ejemplos.
Ejemplo 1: El siguiente ejemplo demuestra el widget de filtro. Para crear la función de filtro, agregue data-filter= «true» para el elemento HTML. En este caso, se hace para el elemento «ul». Otros atributos del complemento también se pueden configurar según la necesidad.
HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href="css.css" /> <script src= "http://code.jquery.com/jquery-1.9.1.min.js"> </script> <script src="jqm.js"></script> </head> <body> <div data-role="page"> <div data-role="content" id="divID"> <p><strong>Listview images</strong></p> <div class="some"> <ul data-role="listview" data-inset="true" data-filter="true" data-target="some"><br> <li> <img src="images/gfg2.JPG" alt="geeks1" data-filtertext="gfgFest" width="250" height="250"> gfgFest </li> <li> <img src="images/gfg4.JPG" alt="geeks2" data-filtertext="fiesta" width="200" height="200"> fiesta </li> <li> <img src="images/gfg6.PNG" alt="geeks3" data-filtertext="CS portal" width="200" height="200"> CS Portal </li> <li> <img src="images/background2.JPG" alt="geeks4" data-filtertext="html" width="200" height="200"> html </li> <li> <img src="images/background3.JPG" alt="geeks5" data-filtertext="css" width="200" height="200"> css </li> </ul> </div> <!-- End div content --> </div> <!-- End div page --> </div> </body> </html>
Producción:
- Antes del filtro:
- Después del filtro:
Ejemplo 2: en el siguiente filtro de datos se establece en «verdadero» para la tabla HTML.
html
<!DOCTYPE html> <html> <head> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href="css.css" /> <script src= "http://code.jquery.com/jquery-1.9.1.min.js"> </script> <script src="jqm.js"></script> </head> <body> <div data-role="page"> <div data-role="content" id="divID"> <p> <strong> Table </strong> </p> <div class="tableWrap"> <table cellspacing="0" class="ui-responsive table-stroke" data-role="table" id="sample" data-mode="columntoggle" data-filter="true"> <thead> <tr> <th rowspan="2"> Company </th> <th rowspan="2" data-sortable="true" data-priority="6"> Last Trade </th> <th rowspan="2" data-priority="3" data-sortable="true"> Trade Time </th> <th rowspan="2" data-priority="5" data-sortable="true"> Open</th> </tr> </thead> <tbody class="table_body"> <tr> <th><span class="co-name"> Google Inc. </span></th> <td>597.74</td> <td>12:12PM</td> <td>597.95</td> </tr> <tr> <th><span class="co-name"> Apple Inc. </span></th> <td>378.94</td> <td>12:22PM</td> <td>381.02</td> </tr> <tr> <th><span class="co-name"> Amazon.com Inc. </span></th> <td>191.55</td> <td>12:23PM</td> <td>194.99</td> </tr> <tr> <th><span class="co-name"> Oracle Corporation </span></th> <td>31.15</td> <td>12:44PM</td> <td>30.67</td> </tr> <tr> <th><span class="co-name"> Microsoft Corporation </span></th> <td>25.50</td> <td>12:27PM</td> <td>25.37</td> </tr> </tbody> </table> </div> <!-- End div content --> </div> <!-- End div page --> </div> </body> </html>
Producción:
- Antes del filtro:
- Después del filtro:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA