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. 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, utilizaremos la opción filterTheme de jQuery Mobile Listview . La opción establece el esquema de color de las muestras en la barra de búsqueda que obtenemos con la opción de filtro de Listview. Los colores son de los colores que se incluyen en nuestro tema.
Sintaxis : para configurar la opción filterTheme de Listview, use la siguiente sintaxis. El filterTheme toma un solo carácter de az como parámetro donde cada carácter especifica algún color.
Para la inicialización de la opción filterTheme, use la siguiente sintaxis
$(".items").listview({
filterTheme:"a",
});
-
Obtenga la opción filterTheme.
var filterThemeOption = $(".items").listview( "option", "filterTheme" ); -
Establezca la opción filterTheme.
$(".items").listview( "option", "filterTheme", "b" );
Enlaces de CDN : use los siguientes enlaces de CDN para su proyecto de 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 1 : hemos establecido el tema en oscuro usando el carácter «b » para la opción filterTheme de Listview.
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 filterTheme Option</h3>
<ul class="items" data-filter-theme="b">
<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,
filterTheme: "b",
});
</script>
</body>
</html>
Producción
Ejemplo 2 : use el tema de luz configurando filterTheme como «a» .
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 filterTheme Option</h3>
<ul class="items" data-filter-theme="a">
<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,
filterTheme: "a",
});
</script>
</body>
</html>
Producción
Referencia: https://api.jquerymobile.com/listview/#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