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 filterReveal de jQuery Mobile Listview . La opción filterReveal se usa para ocultar o mostrar la lista de resultados de búsqueda en la opción de filtro de Listview. Si es verdadero , la lista se oculta cuando el texto de búsqueda está vacío; de lo contrario, muestra la lista completa de elementos. También cambia la revelación del filtro de datos como verdadera para la lista desordenada.
Sintaxis : Necesitamos pasar verdadero o falso como parámetro a filterReveal . Utilice la siguiente sintaxis para la inicialización.
$(".items").listview({
filterReveal:true,
});
-
Obtenga la opción filterReveal :
var filterRevealOption = $(".items").listview( "option", "filterReveal" ); -
Establezca la opción filterReveal :
$(".items").listview( "option", "filterReveal", true );
Enlaces CDN : use los siguientes CDN de jQuery Mobile 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, estamos configurando la opción filterReveal en true .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>jQuery Mobile Listview filterReveal Option</h3>
<ul class="items" data-filter-reveal="true">
<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,
filterReveal: true,
});
</script>
</body>
</html>
Producción:
Referencia : https://api.jquerymobile.com/listview/#option-filterReveal
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA