EasyUI es un marco HTML5 para usar componentes de interfaz de usuario basados en tecnologías jQuery, React, Angular y Vue. Ayuda a crear funciones para aplicaciones móviles y web interactivas, lo que ahorra mucho tiempo a los desarrolladores.
En este artículo, aprenderemos a diseñar listas de datos para la interfaz móvil. Las listas de datos son listas desplegables con opciones de entrada predefinidas.
Descargas para EasyUI para jQuery:
https://www.jeasyui.com/download/index.php
Tenga cuidado con las rutas de archivo adecuadas al implementar los códigos de su aplicación móvil.
Ejemplo 1: el siguiente código demuestra la lista de datos simple usando jQuery EasyUI .
html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- EasyUI specific stylesheets--> <link rel="stylesheet" type="text/css" href="themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="themes/mobile.css"> <link rel="stylesheet" type="text/css" href="themes/icon.css"> <!--jQuery library --> <script type="text/javascript" src="jquery.min.js"> </script> <!--jQuery libraries of EasyUI and EasyUI Mobile --> <script type="text/javascript" src="jquery.easyui.min.js"> </script> <script type="text/javascript" src="jquery.easyui.mobile.js"> </script> </head> <body> <div class="easyui-navpanel"> <header> <!--EasyUI m-toolbar class is used --> <div class="m-toolbar"> <span class="m-title"> Basic DataList </span> </div> </header> <!--EasyUI easyui-datalist class is used --> <ul class="easyui-datalist" data-options=" fit: true, lines: true, border: false "> <li>BMW</li> <li>Mercedes</li> <li>Bentley</li> <li><a href="javascript:void(0)" class="datalist-link"> Audi </a></li> <li><a href="javascript:void(0)" class="datalist-link"> Volkswagen </a> </li> <li>Tesla</li> <li>Brio</li> </ul> </div> </body> </html>
Producción:
Ejemplo 2: el siguiente código muestra una lista de datos agrupada mediante jQuery EasyUI. Al hacer clic en cada elemento de la lista de datos, muestra el contenido del elemento respectivo con un enlace «Atrás».
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<!-- EasyUI specific stylesheets-->
<link rel="stylesheet" type="text/css"
href="themes/metro/easyui.css">
<link rel="stylesheet" type="text/css"
href="themes/mobile.css">
<link rel="stylesheet" type="text/css"
href="themes/icon.css">
<!--jQuery library -->
<script type="text/javascript"
src="jquery.min.js">
</script>
<!--jQuery libraries of EasyUI -->
<script type="text/javascript"
src="jquery.easyui.min.js">
</script>
<!--jQuery library EasyUI Mobile -->
<script type="text/javascript"
src="jquery.easyui.mobile.js">
</script>
</head>
<body>
<div class="easyui-navpanel">
<header>
<div class="m-toolbar">
<span class="m-title">
DataList group
</span>
</div>
</header>
<div id="datalistID" data-options="
fit: true,
border: false,
lines: true">
</div>
</div>
<div id="divID" class="easyui-navpanel">
<header>
<!--EasyUI 'm-toolbar' class is used-->
<div class="m-toolbar">
<span id="divID-title" class="m-title">
Car Details
</span>
<!--EasyUI 'easyui-linkbutton' class
is used for link and
'm-back' class is used for backtrack -->
<div class="m-left">
<a href="javascript:void(0)"
class="easyui-linkbutton m-back"
plain="true" outline="true"
onclick="$.mobile.back()">
Back
</a>
</div>
</div>
</header>
</div>
<script>
// The listitems can be grouped
var data = [
{ "group": "Group1", "item": "Audi" },
{ "group": "Group1", "item": "Mercedes" },
{ "group": "Group2", "item": "Bentley" },
{ "group": "Group2", "item": "BMW" },
{ "group": "Group3", "item": "Sedan" },
{ "group": "Group3", "item": "SUV" }
];
// jQuery function for datalist
$(function () {
$('#datalistID').datalist({
data: data,
textField: 'item',
groupField: 'group',
textFormatter: function (value) {
return
'<a href="javascript:void(0)" class="datalist-link">'
+ value + '</a>';
},
/* On click of one row,it takes to the
#divID-title with respective item */
onClickRow: function (index, row) {
$('#divID-title').html(row.item);
$.mobile.go('#divID');
}
})
})
</script>
</body>
</html>
Producción:
Ejemplo 3: El siguiente ejemplo muestra la casilla de verificación para la lista de datos.
html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<!-- EasyUI specific stylesheets-->
<link rel="stylesheet" type="text/css"
href="themes/metro/easyui.css">
<link rel="stylesheet" type="text/css"
href="themes/mobile.css">
<link rel="stylesheet" type="text/css"
href="themes/icon.css">
<!--jQuery library -->
<script type="text/javascript"
src="jquery.min.js">
</script>
<!--jQuery libraries of EasyUI -->
<script type="text/javascript"
src="jquery.easyui.min.js">
</script>
<!--jQuery library EasyUI Mobile -->
<script type="text/javascript"
src="jquery.easyui.mobile.js">
</script>
</head>
<body>
<div class="easyui-navpanel">
<header>
<div class="m-toolbar">
<span class="m-title">
DataList selection
</span>
</div>
</header>
<div id="datalistID" data-options="
fit: true,
border: false,
lines: true,
checkbox: true,
singleSelect: false
">
</div>
</div>
<script>
// The listitems can be grouped
var data = [
{ "group": "Group1", "item": "Audi" },
{ "group": "Group1", "item": "Mercedes" },
{ "group": "Group2", "item": "Bentley" },
{ "group": "Group2", "item": "BMW" },
{ "group": "Group3", "item": "Sedan" },
{ "group": "Group3", "item": "SUV" }
];
// jQuery function for datalist
$(function () {
$('#datalistID').datalist({
data: data,
textField: 'item',
groupField: 'group'
})
})
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA