jQuery Mobile Listview splitIcon Opción

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *