jQuery Mobile es un conjunto de herramientas de widgets de interacción con el sistema del usuario basado en HTML5 que se utiliza para diversos fines construidos sobre jQuery. Está diseñado para crear sitios rápidos y con capacidad de respuesta accesibles para dispositivos móviles, pestañas y computadoras 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, usaremos la opción del ícono Listview de jQuery Mobile . Los elementos de la lista vinculada pueden tener diferentes iconos de jQuery Mobile. El icono aparece al final del elemento de la lista. Tenemos muchos íconos para demostrar diferentes condiciones. Esta opción también está expuesta al «atributo de datos: icono de datos»
Sintaxis: la sintaxis para cambiar el icono del elemento de la lista vinculada es la siguiente.
$(".items").listview({
icon:"arrow-r",
});
Hay varios íconos de jQuery Mobile. La lista completa es la siguiente:
|
LISTA DE ICONOS |
||||
| acción | audio | controlar | cuadrícula | energía |
| alerta | espalda | reloj | corazón | reciclar |
| flecha-d | barras | nube | hogar | actualizar |
| flecha-dl | balas | comentario | información | búsqueda |
| flecha-dr | calendario | Eliminar | ubicación | tienda |
| flecha-l | cámara | editar | bloqueo de correo | estrella |
| flecha-r | quilates-d | ojo | menos | etiqueta |
| flecha-u | quilate-l | prohibido | navegación | usuario |
| flecha-ul | quilates-r | delantero | teléfono | video |
| flecha-ur | carat-u | engranaje | más | |
Enlace CDN: Primero, agregue los scripts de jQuery Mobile necesarios para su proyecto.
<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 : el siguiente ejemplo muestra una vista de lista con un icono de estrella.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>GeeksforGeeks</title>
<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>
<h4>GeeksforGeeks Light Theme Listview</h4>
<ul class="items" data-role="listview">
<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 Prgramming
</a>
</li>
</ul>
<script>
$(".items").listview({
icon: "star",
});
</script>
</body>
</html>
Producción:
Ejemplo 2 : El siguiente ejemplo muestra una vista de lista usando un ícono de flecha hacia la derecha como «flecha-r».
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>GeeksforGeeks</title>
<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>
<h4>GeeksforGeeks Light Theme Listview</h4>
<ul class="items" data-role="listview">
<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 Prgramming
</a>
</li>
</ul>
<script>
$(".items").listview({
icon: "arrow-r",
});
</script>
</body>
</html>
Producción:
Referencia: https://api.jquerymobile.com/listview/#option-icon
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA