jQuery Mobile es un conjunto de herramientas de widget de interacción de usuario basado en HTML5 que se utiliza para diversos fines construidos sobre jQuery . Está diseñado para crear sitios web 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 el método jQuery Mobile refresh() que se usa para actualizar la interfaz de usuario de los elementos de la lista cuando el DOM (Modelo de objeto del documento) se modifica después de cargar la página. La lista se puede modificar usando JavaScript en el lado del cliente.
Sintaxis: el método refresh() no toma ningún parámetro y cuando se llama, Listview obtiene una interfaz de usuario actualizada.
function refresh() {
$(".items").listview("refresh");
}
Enlace de CDN: use los siguientes CDN para 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: En este ejemplo, hay una lista rellenada previamente con algunos elementos. A continuación, hay dos secciones de entrada y «Haga clic para agregar» que agregará un nuevo elemento de la lista. El botón Actualizar que actualiza la interfaz de usuario de ListView.
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>jQuery Mobile Listview</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>
<center>
<h1>Geeksforgeeks</h1>
<strong>jQuery Mobile Listview refresh() Method</strong>
</center>
<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 Programming
</a>
</li>
</ul>
<div style="padding: 30px;">
<label for="name">Name</label>
<input type="text" name="name" id="name">
<label for="link">Link</label>
<input type="text" name="link" id="link">
<button onclick="addItem()">Click to add</button>
</div>
<button onclick="refresh()"
style="background-color:green;">
Refresh</button>
<script>
$(".items").listview({
icon: "arrow-r",
});
function addItem() {
var item = "<li>" +
"<a href=\"" + $("#link").val() + "\" target=\"_blank\">" +
$("#name").val() +
"</a>" +
"</li>"
$(".items").append(item);
$("#link").val("");
$("#name").val("");
}
function refresh() {
$(".items").listview("refresh");
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA