jQuery Mobile es un sistema de interfaz de usuario basado en HTML5 diseñado para crear aplicaciones y sitios web receptivos accesibles en todos los teléfonos inteligentes, tabletas y dispositivos de escritorio. Filterable es un widget que puede filtrar los hijos de cualquier elemento. Un formulario, una lista, etc. se pueden filtrar con la ayuda de filterable. Aparece una barra de búsqueda en la parte superior de la Lista donde se escribe el texto de búsqueda.
En este artículo, vamos a aprender la opción filterReveal de jQuery Mobile Filterable . La opción filterReveal establece si los elementos deben ser visibles o no si el texto de búsqueda está vacío. Si es verdadero , los elementos no serán visibles si la búsqueda está vacía y viceversa. El valor predeterminado se establece en falso .
Sintaxis : la opción filterReveal toma un valor booleano y se inicializa de la siguiente manera:
$(".items").filterable({
filterReveal: true,
});
-
Obtener la opción filterReveal
var filterRevealOpt = $(".items") .filterable("option", "filterReveal"); -
Establecer la opción filterReveal
$(".items").filterable("option", "filterReveal", "true");
Vínculos de CDN : use los siguientes CDN para el proyecto jQuery Mobile.
<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, la opción filterReveal se establece 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; text-align: center;">
GeeksforGeeks
</h1>
<h3 style="text-align: center;">
jQuery Mobile Filterable filterReveal Option
</h3>
<ul class="items">
<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").filterable({
filterReveal: true,
});
</script>
</body>
</html>
Producción
Opción de revelación de filtro filtrable de jQuery Mobile
Referencia: https://api.jquerymobile.com/filterable/#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