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, vamos a implementar la opción jQuery Mobile Listview splitTheme . El splitIcon jQuery Mobile Listview viene con varios temas utilizados como splitTheme . Los diferentes temas tienen diferentes colores.
Sintaxis: para implementar splitTheme , necesitamos pasar un solo carácter de az en el caso pequeño donde cada letra representa un tema de color.
$(".items").listview({
splitTheme:"a",
});
-
Obtén la opción splitTheme :
var splitTheme = $(".items").listview( "option", "splitTheme" ); -
Establezca la opción splitTheme :
$( ".items" ).listview( "option", "splitTheme", "b" );
Ejemplo 1 : en este ejemplo, estamos usando el tema claro en splitTheme usando el carácter ‘a’ . 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.
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 splitTheme Option</h3>
<ul class="items">
<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",
splitTheme: "a",
});
</script>
</body>
</html>
Producción:
Ejemplo 2 : Hemos usado el tema oscuro en splitTheme 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 splitTheme Option</h3>
<ul class="items">
<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",
splitTheme: "b",
});
</script>
</body>
</html>
Producción:
Referencia : https://api.jquerymobile.com/listview/#option-splitTheme
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA