En este artículo, aprenderemos cómo diseñar una función de vista de lista editable utilizando el complemento móvil jQuery. El complemento proporciona una interfaz de usuario intuitiva para agregar o eliminar elementos de la lista a la lista existente.
Para diseñar e implementar el complemento, descargue los archivos o bibliotecas precompilados necesarios del enlace y guárdelo en su carpeta de trabajo. Los nombres de las rutas de los archivos deben tenerse en cuenta durante la codificación.
Nota: Utilice los siguientes enlaces en la sección principal del código HTML para ejecutarlo como se muestra a continuación.
<enlace href=”http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.css”
rel=”hoja de estilo” type=”text/css”/><link href=”editable-listview.css”
rel=”stylesheet” type=”text/css”/><script src=”http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.js”></script>
<script src=”http://code.jquery.com/jquery-2.1.1.js”></script>
<script src=”editable-listview.js”></script>
Ejemplo 1: El siguiente ejemplo muestra una vista de lista editable simple usando el complemento móvil jQuery. El usuario puede agregar y eliminar nombres de frutas en la lista como se muestra en el siguiente resultado.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<link rel="stylesheet"
href=
"http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.css"/>
<link rel="stylesheet" href="editable-listview.css"/>
<script src=
"http://code.jquery.com/jquery-2.1.1.js">
</script>
<script src=
"http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.js">
</script>
<script src="editable-listview.js"></script>
</head>
<body style="padding: 20px;">
<h2>jQuery Mobile Editable Listview</h2>
<div style="padding: 20px;">
<ul id="mylistID" data-role="listview"
data-item-name="fruitName">
<li>Pineapple</li>
<li>Mango</li>
<li>Orange</li>
<li>Banana</li>
</ul>
<br />
</div>
<script>
var $list = $("#mylistID").listview({
editable: true,
title: "Fruits",
emptyTitle: "No Fruits",
});
</script>
</body>
</html>
Producción:
- Antes de editar:
- Después de editar:
Ejemplo 2: El siguiente ejemplo muestra otra vista de lista editable con algunas propiedades agregadas. El «id» del formulario debe coincidir con el atributo de formulario de datos editables en la etiqueta «ul» y el atributo de datos editables se establece en «verdadero».
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1"/>
<link rel="stylesheet"
href=
"http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.css"/>
<link rel="stylesheet" href="editable-listview.css" />
<script src=
"http://code.jquery.com/jquery-2.1.1.js">
</script>
<script src=
"http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.js">
</script>
<script src="editable-listview.js"></script>
</head>
<body style="padding: 20px;">
<h2>jQuery Mobile editable listview</h2>
<div style="padding: 20px;">
<p><strong>Complex Editable Listview</strong></p>
<ul id="list" data-role="listview"
data-editable="true"
data-editable-type="complex"
data-editable-form="editing-formID"
data-title="Vegetables"
data-empty-title="No Veggies">
<li>
<a>
<h3>
<span id="veggieName">
Potato
</span>
</h3>
<p>
<em>Shape:</em>
<strong>
<span id="veggieShape">
round
</span>
</strong>
</p>
<p>
<em>Color:</em>
<strong>
<span id="veggieColor">
brown
</span>
</strong>
</p>
</a>
</li>
<li>
<a>
<h3><span id="veggieName">
Brinjal
</span>
</h3>
<p>
<em>Shape:</em>
<strong>
<span id="veggieShape">
oval
</span>
</strong>
</p>
<p>
<em>Color:</em>
<strong>
<span id="veggieColor">
purple
</span>
</strong>
</p>
</a>
</li>
<li>
<a>
<h3><span id="veggieName">
Tomato
</span>
</h3>
<p>
<em>Shape:</em>
<strong>
<span id="veggieShape">
round
</span>
</strong>
</p>
<p>
<em>Color:</em>
<strong>
<span id="veggieColor">
red
</span>
</strong>
</p>
</a>
</li>
</ul>
<form id="editing-formID"
data-editable-form="true">
<input type="text"
data-item-name="veggieName"
data-item-template="<h3>
<span id='veggieName'>%%</span>
</h3>"/>
<input
type="text"
data-item-name="veggieShape"
data-item-template="<p><em>Shape:</em>
<strong><span id='veggieShape'>%%</span>
</strong></p>"/>
<input
type="text"
data-item-name="veggieColor"
data-item-template="<p><em>Color:</em>
<strong><span id='veggieColor'>%%</span>
</strong></p>"/>
<button class="ui-btn ui-corner-all"
data-add-button="true">
Add
</button>
<button class="ui-btn ui-corner-all"
data-clear-button="true">
Clear
</button>
</form>
</div>
<script>
var $list = $("#list").listview({
editable: true,
editableType: "simple",
title: "Veggies",
emptyTitle: "No Veggies",
});
</script>
</body>
</html>
Producción:
- Antes de editar:
- Después de editar:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA