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 el diálogo de inicio de sesión y el diálogo de mensajes para móviles utilizando el complemento jQuery EasyUI.
Descargas para EasyUI para jQuery:
https://www.jeasyui.com/download/index.php
Tenga cuidado con las rutas de archivo adecuadas durante la implementación del código.
Ejemplo 1: El siguiente ejemplo demuestra el diseño del cuadro de diálogo de inicio de sesión utilizando el complemento anterior. Los íconos utilizados en las opciones de datos se toman de la carpeta «temas» de descargas.
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 of EasyUI Mobile -->
<script type="text/javascript" src="jquery.easyui.mobile.js">
</script>
</head>
<body>
<div class="easyui-navpanel" style="position:relative">
<!-- m-title,m-toolbar class is used here-->
<header>
<div class="m-toolbar">
<div class="m-title">Basic Dialog</div>
</div>
</header>
<div style="text-align:center;margin:50px 30px">
<a href="javascript:void(0)"
class="easyui-linkbutton"
data-options="plain:true,outline:true"
style="width:80px;height:30px"
onclick="$('#dialogID')
.dialog('open').dialog('center')">
Login
</a>
</div>
<!-- easyui-dialog is used for Dialog box-->
<div id="dialogID" class="easyui-dialog"
style="padding:20px 6px;width:80%;"
data-options="inline: true, modal: true,
closed: true, title: 'Login'">
<div style="margin-bottom:10px">
<!-- easyui-textbox is used for username-->
<input class="easyui-textbox"
prompt="Username"
style="width:100%;height:30px">
</div>
<div>
<input class="easyui-textbox"
type="password" prompt="Password"
style="width: 100%; height: 30px">
</div>
<!-- dialog-button class is used here-->
<div class="dialog-button">
<a href="javascript:void(0)"
class="easyui-linkbutton"
style="width:100%;height:35px"
onclick="$('#dialogID').dialog('close')">
Sign in
</a>
</div>
</div>
<!-- m-buttongroup class is used here-->
<footer>
<div class="m-buttongroup m-buttongroup-justified"
style="width:100%">
<a href="https://www.geeksforgeeks.org/about/"
class="easyui-linkbutton"
data-options="iconCls:'icon-large-picture',
size:'large', iconAlign:'top',plain:true">
About Us
</a>
<a href="https://www.geeksforgeeks.org/privacy-policy/"
class="easyui-linkbutton"
data-options="iconCls:'icon-large-picture',
size:'large', iconAlign:'top', plain: true">
Privacy Policy
</a>
<a href="https://www.geeksforgeeks.org/careers/"
class="easyui-linkbutton"
data-options="iconCls:'icon-large-picture',
size:'large', iconAlign:'top',plain:true">
Careers
<span class="m-badge">
25
</span>
</a>
</div>
</footer>
</div>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra el diseño del cuadro de diálogo de mensaje para la interfaz de inicio de sesión para móviles.
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 of EasyUI Mobile -->
<script type="text/javascript" src="jquery.easyui.mobile.js">
</script>
</head>
<body>
<div class="easyui-navpanel" style="position:relative">
<header>
<div class="m-toolbar">
<div class="m-title">Message Dialog</div>
</div>
</header>
<div style="text-align:center;margin:50px 30px">
<a href="javascript:void(0)"
class="easyui-linkbutton"
data-options="plain:true,outline:true"
style="width:80px;height:30px"
onclick="$('#dialogID')
.dialog('open').dialog('center')">
Click me
</a>
</div>
<div id="dialogID" class="easyui-dialog"
style="padding:20px 6px;width:80%;"
data-options="inline:true,modal:true,
closed:true,title:'Information'">
<p>This is a message dialog box.</p>
<div class="dialog-button">
<a href="javascript:void(0)"
class="easyui-linkbutton"
style="width:100%;height:35px"
onclick="$('#dialogID').dialog('close')">
OK
</a>
</div>
</div>
<!-- m-buttongroup class is used here-->
<footer>
<div class="m-buttongroup m-buttongroup-justified"
style="width:100%">
<a href="https://www.geeksforgeeks.org/about/"
class="easyui-linkbutton"
data-options="iconCls:'icon-large-picture',
size:'large',iconAlign:'top',plain:true">
About Us
</a>
<a href="https://www.geeksforgeeks.org/privacy-policy/"
class="easyui-linkbutton"
data-options="iconCls:'icon-large-picture',
size:'large', iconAlign:'top',plain:true">
Privacy Policy
</a>
<a href="https://www.geeksforgeeks.org/careers/"
class="easyui-linkbutton"
data-options="iconCls:'icon-large-picture',
size:'large', iconAlign:'top',plain:true">
Careers
<span class="m-badge">
25
</span>
</a>
</div>
</footer>
</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