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 tutorial, vamos a aprender la opción mejorada jQuery Mobile Filterable . La opción mejorada indica si el marcado original necesario para el widget filtrable está presente o no. Haciéndolo cierto, algunas opciones no funcionan por primera vez.
Sintaxis : la opción mejorada toma un valor booleano .
Inicialice el widget filtrable:
$(".items").filterable({
enhanced:true,
});
-
Obtenga la opción mejorada :
var enhanced = $(".items").filterable("option", "enhanced"); -
Configure la opción mejorada :
$(".items").filterable("option", "enhanced", true);
Vínculos de CDN : use los siguientes CDN para su proyecto de jQuery Mobile.
<enlace href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” rel=”hoja de estilo”/>
<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 mejorada se establece en «verdadero» con filterReveal establecido en «verdadero», pero no funciona porque elimina el marcado requerido para Filterable. Pero después de una sola búsqueda, la opción mejorada ya no está en acción cuando se carga el widget.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"
rel="stylesheet"/>
<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 enhanced 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({
enhanced:true,
filterReveal:true,
});
</script>
</body>
</html>
Producción:
Opción mejorada filtrable de jQuery Mobile
Referencia: https://api.jquerymobile.com/filterable/#option-enhanced
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA