En este artículo, aprenderemos cómo diseñar un panel de navegación con carga ajax usando el complemento 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 adecuadas para los archivos de biblioteca precompilados durante la implementación del código.
Ejemplo 1: El siguiente código demuestra el diseño de dos paneles de navegación con la opción ‘Volver’ a otro panel usando el complemento jQuery EasyUI Mobile.
<!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 of EasyUI
Mobile for navigation panel-->
<div class="easyui-navpanel">
<header>
<div class="m-toolbar">
<div class="m-title">
Handling navigation panel
</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.go('#divID2')">
Goto Panel 2
</a>
</div>
</div>
<div id="divID2" class="easyui-navpanel">
<header>
<div class="m-toolbar">
<div class="m-title">
Navigation panel 2
</div>
<div class="m-left">
<!--'m-back' class is used-->
<a href="#" class="easyui-linkbutton
m-back" data-options=
"plain:true,outline:true,back:true">
<!--data option back is set to 'true' -->
Back
</a>
</div>
</div>
</header>
<div style="margin:50px 0 0;text-align:center">
<a href="javascript:void(0)"
class="easyui-linkbutton"
onclick="$.mobile.back()">
Go Back
</a>
</div>
<footer>
<div class="m-toolbar">
<div class="m-title">Footer Content</div>
</div>
</footer>
</div>
</body>
</html>
Producción:
Ejemplo 2: El siguiente código demuestra la carga Ajax del contenido de la página web mediante el complemento jQuery EasyUI Mobile.
<!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 of EasyUI Mobile for navigation panel--> <div class="easyui-navpanel" data-options="href:'displayContent.html'" style="padding:10px"> <!--For Ajax loading of any page, just set the data-options attribute with file name--> <header> <div class="m-toolbar"> <div class="m-title"> Ajax Content </div> </div> </header> <footer> <div class="m-toolbar"> <div class="m-title"> Footer Content </div> </div> </footer> </div> </body> </html>
displayContent.html El siguiente es el contenido del código para el archivo «displayContent.html» que se utiliza en el código de ejemplo anterior.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <p style="font-size:14px"> Ajax content loaded from file </p> <p> Ajax is an acronym for Asynchronous Javascript and XML. It is used to communicate with the server without refreshing the web page and thus increasing the user experience and better. Facebook, Instagram, Twitter etc are considered the situation when check news feed and if like someone post simply click the like button and the like count is added without refreshing the page. Now imagine the situation if there would be the case, click the like button and the complete page would be loaded again which will make such processes. </p> </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