jQuery Mobile es un conjunto de herramientas de widget de interacción de usuario basado en HTML5 que se utiliza para diversos fines construidos sobre jQuery. Está diseñado para crear sitios web rápidos y con capacidad de respuesta accesibles para dispositivos móviles, pestañas y computadoras de escritorio. jQuery Listview es un widget que se utiliza para crear hermosas listas. Es una vista de lista simple y receptiva que se usa para ver las listas desordenadas.
En este artículo, usaremos la opción de filtro jQuery Mobile. La opción de filtro agrega una barra de búsqueda en la parte superior de ListView. Busca elementos de la lista en ListView automáticamente y oculta los elementos que no coinciden.
Sintaxis : el filtro toma un valor booleano. Si es verdadero, la barra de búsqueda aparece en la parte superior de la vista de lista.
$(".items").listview({
filter: true,
});
Vínculos CDN : Primero, agregue los scripts de jQuery Mobile necesarios para su proyecto.
<enlace rel=”hoja de estilo” 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.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min .js”></secuencia de comandos>
Ejemplo : en el siguiente ejemplo, hemos utilizado la opción de filtro para nuestra vista de lista.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>GeeksforGeeks</title>
<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.1.min.js">
</script>
<script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body>
<h4>GeeksforGeeks filter option Listview</h4>
<ul class="items" data-role="listview">
<li>
<a href=
"https://www.geeksforgeeks.org/data-structures"
target="_blank">
Data Structures
</a>
</li>
<li>
<a href=
"https://practice.geeksforgeeks.org/courses/complete-interview-preparation"
target="_blank">
Interview preparation
</a>
</li>
<li>
<a href="https://www.geeksforgeeks.org/java"
target="_blank">
Java Programming
</a>
</li>
</ul>
<script>
$(".items").listview({
filter: true,
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA