En este artículo aprenderemos a diseñar listas, agruparlas y crear enlaces para facilitar la navegación utilizando jQuery EasyUI Mobile .
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.
Descargas para EasyUI para jQuery:
https://www.jeasyui.com/download/index.php
Tenga cuidado con las rutas de archivo de los archivos de biblioteca precompilados durante la implementación.
Ejemplo 1: el siguiente ejemplo muestra listas y crea enlaces a través de botones usando jQuery EasyUI Mobile .
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 libraries of EasyUI Mobile--> <script type="text/javascript" src="jquery.easyui.mobile.js"> </script> </head> <body> <!--'easyui-navpanel' class is used for nav panel--> <div class="easyui-navpanel"> <header> <div class="m-toolbar"> <span class="m-title">List Button</span> </div> </header> <!--'m-list' class is used for simple list--> <ul class="m-list"> <li>C <div class="m-right"> <a href= "https://www.geeksforgeeks.org/c-programming-language/" class="easyui-linkbutton"> Add </a> </div> </li> <li>C++ <div class="m-right"> <a href= "https://www.geeksforgeeks.org/c-plus-plus/" class="easyui-linkbutton"> Add </a> </div> </li> <li>Java <div class="m-right"> <a href= "https://www.geeksforgeeks.org/java/" class="easyui-linkbutton"> Add </a> </div> </li> <li>Python <div class="m-right"> <a href= "https://www.geeksforgeeks.org/python-programming-language/" class="easyui-linkbutton"> Add </a> </div> </li> </ul> </div> </body> </html>
Producción:
- Antes de ejecutar:
Después de ejecutar:
Ejemplo 2: El siguiente ejemplo demuestra la agrupación de listas utilizando el complemento anterior.
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 libraries of EasyUI Mobile-->
<script type="text/javascript" src="jquery.easyui.mobile.js">
</script>
</head>
<body>
<!--'easyui-navpanel' class for navigation panel-->
<div class="easyui-navpanel">
<header>
<div class="m-toolbar">
<span class="m-title">
List group and link lists
</span>
</div>
</header>
<!--'m-list' class is used for simple lists -->
<ul class="m-list">
<!--'m-list-group' class is used to group lists -->
<li class="m-list-group">Algorithms</li>
<li>
<a href=
"https://www.geeksforgeeks.org/analysis-of-algorithms-set-1-asymptotic-analysis/"
onclick="display(this)">
Analysis of algorithms
</a>
</li>
<li>
<a href=
"https://www.geeksforgeeks.org/searching-algorithms/"
onclick="display(this)">
Searching algorithms
</a>
</li>
<li>
<a href=
"https://www.geeksforgeeks.org/geometric-algorithms/"
onclick="display(this)">
Geometric algorithms
</a>
</li>
<li><a href=
"https://www.geeksforgeeks.org/greedy-algorithms/"
onclick="display(this)">
Greedy algorithms
</a>
</li>
<li class="m-list-group">
Web Technologies
</li>
<li><a href="" onclick="display(this)">
HTML</a>
</li>
<li>
<a href=
"https://www.geeksforgeeks.org/javascript-tutorial/"
onclick="display(this)">
Javascript
</a>
</li>
</ul>
</div>
<div id="divID2" class="easyui-navpanel">
<header>
<div class="m-toolbar">
<span id="panel2-title" class="m-title">
Details
</span>
<div class="m-left">
<!--'m-back' class is used for
going back-->
<a href="javascript:void(0)"
class="easyui-linkbutton m-back"
plain="true" outline="true"
onclick="$.mobile.back()">
Back
</a>
</div>
</div>
</header>
<div style="margin:50px 0 0;text-align:center">
<a href="javascript:void(0)"
class="easyui-linkbutton"
style="width:100px;height:30px"
onclick="$.mobile.back()">
Go Back
</a>
</div>
</div>
<script type="text/javascript">
function display(target) {
var link = $(target).text();
$('#panel2-title').html(link);
$.mobile.go('#divID2');
}
</script>
</body>
</html>
Producción:
- Antes de ejecutar:
- Después de ejecutar:
Ejemplo 3: El siguiente ejemplo muestra listas simples con imágenes usando el complemento anterior.
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 libraries of EasyUI Mobile-->
<script type="text/javascript" src="jquery.easyui.mobile.js">
</script>
<style>
#listID .list-image {
float: left;
width: 32px;
height: 32px;
border: 0;
margin-right: 5px;
}
#listID .list-header {
font-size: 14px;
font-weight: bold;
}
#listID .list-content {
text-overflow: ellipsis;
overflow: hidden;
}
</style>
</head>
<body>
<!--'easyui-navpanel' class for
navigation panel-->
<div class="easyui-navpanel">
<header>
<div class="m-toolbar">
<span class="m-title">
Images for simple lists
</span>
</div>
</header>
<!--'m-list' class is used -->
<ul id="listID" class="m-list">
<li>
<!--'list-image' class is used -->
<img class="list-image" src="images/html.png" />
<!--'list-header' class is used for heading-->
<div class="list-header">HTML</div>
<!--'list-content' class for the list content-->
<div class="list-content">
HTML stands for HyperText Markup Language.
It is used to design web pages.
</div>
</li>
<li>
<img class="list-image" src="images/php.png" />
<div class="list-header">PHP</div>
<div class="list-content">
PHP is a server-side scripting language
designed specifically for web development.
</div>
</li>
</ul>
</div>
</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