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 FilterTheme de jQuery Mobile Filterable. La opción filterTheme establece la muestra de color para el panel de marcador de posición de búsqueda.
Sintaxis: la opción filterTheme toma un solo carácter de az donde cada carácter representa un color.
$(".items").filterable({
filterTheme: "a",
});
Vínculos de CDN: use los siguientes vínculos de 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, hemos establecido el filterTheme en oscuro usando el carácter » b «.
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 Filterable filterTheme 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({
filterTheme: "b",
});
</script>
</body>
</html>
Producción:
Referencia: https://api.jquerymobile.com/filterable/#option-filterTheme
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA