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. Ayuda a crear funciones para aplicaciones móviles y web interactivas, lo que ahorra mucho tiempo a los desarrolladores.
Descargue todos los archivos precompilados necesarios del sitio web oficial y guárdelos en su carpeta de trabajo. Tenga cuidado con las rutas de los archivos durante la implementación del código.
Sitio web oficial de jQuery EasyUI:
https://www.jeasyui.com/download/index.php
Ejemplo 1: El siguiente ejemplo muestra una pantalla de menú simple al hacer clic con el botón derecho en la página web. La parte del script también muestra el manejo de eventos utilizando el marco 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="demo.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>
</head>
<body>
<h2>
jQuery EasyUI basic menu
on right click
</h2>
<p>
Please right click on
the webpage.
</p>
<!-- easyui-menu class is used -->
<div id="menuID" style="width:120px;">
<div>New Window</div>
<div>
<span>Open</span>
<!-- menu-content class is used -->
<div class="menu-content" style=
"text-align:left;padding:10px">
<div style="font-weight:bold;
font-size:14px;margin-bottom:10px">
Select Language:
</div>
<ul id="listID">
<li>JavaScript</li>
<li>Perl</li>
<li>PHP</li>
<li>Python</li>
</ul>
</div>
</div>
<div data-options="iconCls:'icon-save'">
Save
</div>
<div class="menu-sep"></div>
<div>Exit</div>
</div>
<script>
/* Event handling */
$(function () {
$('#menuID').menu();
$('#listID').tree();
$(document).bind('contextmenu', function (e) {
e.preventDefault();
$('#menuID').menu('show', {
left: e.pageX,
top: e.pageY
});
});
});
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra un menú con su submenú utilizando el marco mencionado anteriormente.
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="demo.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>
</head>
<body>
<h2>
jQuery EasyUI basic menu
on right click
</h2>
<p>
Please right click on
the webpage.
</p>
<!-- easyui-menu class is used -->
<div id="menuID" class="easyui-menu"
style="width:120px;">
<div onclick="javascript:alert('new')">
New
</div>
<div>
<span>Open</span>
<div style="width:150px;">
<div><b>Interviews</b></div>
<div>CS subjects</div>
<div>Data Structures</div>
<div>
<span>Algorithms</span>
<div style="width:120px;">
<div>Bit algorithms</div>
<div>Searching </div>
<div>
<span>Sorting</span>
<div style="width:80px;">
<div onclick="javascript:
alert('Linear search')">
Linear search
</div>
<div>Binary search</div>
<div>Jump Search</div>
</div>
</div>
<div>Backtracking</div>
</div>
</div>
<div>
<span>Window</span>
<div style="width:120px;">
<div>History</div>
<div data-options=
"href:'https://www.geeksforgeeks.org/python-programming-language/'">
Bookmarks
</div>
<div>
<a href=
"https://www.geeksforgeeks.org/" target="_blank">
GFG
</a>
</div>
</div>
</div>
</div>
</div>
<div data-options="iconCls:'icon-save'">
Save
</div>
<!-- Set disabled to true if not want to enable -->
<div data-options="iconCls:'icon-print',disabled:true">
Print
</div>
<div class="menu-sep"></div>
<!--menu-sep class is used for separator-->
<div>Exit</div>
</div>
<script>
$(function () {
$(document).bind('contextmenu', function (e) {
e.preventDefault();
$('#menuID').menu('show', {
left: e.pageX,
top: e.pageY
});
});
});
</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