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 jQuery Mobile ListView splitIcon . Si un elemento de la lista tiene un segundo enlace, el icono de división aparece en el lado derecho del elemento de la lista. Esto muestra que hay algo de contenido dentro del elemento de la lista. El valor predeterminado de splitIcon es del tipo carat-r .
Nota: es necesario tener un segundo enlace para que aparezca el icono dividido; de lo contrario, no se mostrará, sino que mostrará el icono normal.
Sintaxis:
Inicialice la vista de lista con la opción splitIcon especificada:
$(".items").listview({
splitIcon: "star",
});
Obtenga o configure la opción splitIcon , después de la inicialización:
// Getter
var splitIcon = $(".selector").listview("option", "splitIcon");
// Setter
$( ".selector" ).listview( "option", "splitIcon", "star" );
Hay varios íconos de jQuery Mobile. La lista completa es la siguiente:
| 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 | zanahoria-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 : En este ejemplo, tenemos una vista de lista con uno de los elementos de la lista que tiene dos enlaces. Al hacer clic en el enlace, la ventana emergente se abre con un mensaje y dos opciones para continuar con el enlace o cerrar la ventana emergente. La ventana emergente también es de la biblioteca jQuery Mobile UI . El splitIcon utilizado es de tipo 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" />
<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 splitIcon Option</h3>
<ul class="items" data-role="listview">
<li>
<a href=
"https://www.geeksforgeeks.org/data-structures">
Data Structures</a>
</li>
<li>
<a href=
"https://practice.geeksforgeeks.org/courses/complete-interview-preparation">
Interview preparation
</a>
<a href="#java" data-rel="popup"
data-position-to="window"
data-transition="pop">
Java Programming
</a>
</li>
<li>
<a href="https://www.geeksforgeeks.org/java">
Java Programming
</a>
</li>
</ul>
<div data-role="popup" id="java"
class="ui-content"
style="max-width:280px; padding-bottom:2rem;">
<h3>GeeksforGeeks</h3>
<p>
Open the Java Tutorial link by clicking
the Open button given below to learn
java from GeeksforGeeks.
</p>
<a href="https://www.geeksforgeeks.org/java"
class="ui-shadow ui-btn ui-corner-all
ui-btn-inline ui-mini">
Open
</a>
<a href="" data-rel="back" class="ui-shadow
ui-btn ui-corner-all ui-btn-inline ui-mini">
Cancel
</a>
</div>
<script>
$(".items").listview({
splitIcon: "star"
});
</script>
</body>
</html>
Producción:
Referencia: https://api.jquerymobile.com/listview/#option-splitIcon
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA