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 jQuery Mobile Listview countTheme . La opción countTheme establece el color del tema de las burbujas de conteo en el elemento de la lista. Las burbujas de recuento son elementos que normalmente se alinean en el extremo derecho de los elementos de la vista de lista.
Nota : Para crear una burbuja de conteo, envuelva un número en la clase «ul-li-count».
Sintaxis : use la siguiente sintaxis para cambiar el tema de las burbujas de conteo usando la opción countTheme . Toma un solo carácter de az donde cada carácter representa un color.
Para la inicialización por primera vez, use la siguiente sintaxis.
$(".items").listview({
countTheme:"b",
});
-
Obtenga la opción countTheme.
var countThemeOption = $(".items").listview( "option", "countTheme" ); -
Establezca la opción countTheme.
$(".items").listview( "option", "countTheme", "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 : hemos establecido el tema oscuro de countTheme 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 Listview countTheme Option</h3>
<ul class="items">
<li>
<a href=
"https://www.geeksforgeeks.org/data-structures"
target="_blank">
Data Structures
<span class="ui-li-count">67</span>
</a>
</li>
<li>
<a href=
"https://practice.geeksforgeeks.org/courses/complete-interview-preparation"
target="_blank">
Interview preparation
<span class="ui-li-count">22</span>
</a>
</li>
<li>
<a href=
"https://www.geeksforgeeks.org/java" target="_blank">
Java Programming
<span class="ui-li-count">102</span>
</a>
</li>
</ul>
<script>
$(".items").listview({
countTheme: "b",
});
</script>
</body>
</html>
Producción:
Referencia : https://api.jquerymobile.com/listview/#option-countTheme
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA