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 cómo diseñar un menú usando jQuery EasyUI. El menú se usa generalmente para menús contextuales. Es el componente base para crear otro componente de menú, como el botón de menú y el botón de división. También se puede utilizar tanto para navegar como para ejecutar comandos.
Descargas para EasyUI para jQuery:
https://www.jeasyui.com/download/index.php
Sintaxis:
<div class="menu"> </div>
Propiedades:
- zIndex: Estilo de menú z-index, aumentar a partir de él.
- izquierda: Posición izquierda del menú.
- top: Posición superior del menú.
- align: La alineación del menú.
- minWidth: El ancho mínimo del menú.
- itemHeight: la altura del elemento del menú.
- duración: Define el tiempo de duración en milisegundos.
- hideOnUnhover: cuando se establece en true , oculta automáticamente el menú cuando el mouse sale de él.
- en línea: si se establece en true, permanece dentro de su padre y se coloca encima de todos los elementos cuando se establece en false .
- fit: si se establece en verdadero, establece el tamaño del menú.
Eventos:
- onShow: se activa después de mostrar el menú.
- onHide: se activa después de ocultar el menú.
- onClick: se activa cuando se hace clic en el elemento del menú.
Métodos:
- opciones: Devuelve el objeto de opciones.
- show: Muestra un menú en una posición específica.
- ocultar: ocultar un menú.
- destruir: destruir un menú
- getItem: obtiene las propiedades del elemento de menú que incluyen una propiedad ‘objetivo’ que indica el elemento DOM del elemento.
- setText: establece el texto del elemento de menú especificado.
- setIcon: establece el icono del elemento de menú especificado.
- findItem: busca el elemento de menú especificado.
- appendItem: agrega un nuevo elemento de menú.
- removeItem: elimina el elemento de menú especificado.
- enableItem: habilita el elemento del menú.
- disabledItem: deshabilita el elemento del menú.
- showItem: Muestra el elemento del menú.
- hideItem: Oculta el elemento del menú.
- redimensionar: Redimensionar el menú especial.
Enlace CDN: Primero, agregue los scripts jQuery Easy UI necesarios para su proyecto.
<script type=”text/javascript” src=”jquery.min.js”> </script>
<!–Bibliotecas jQuery de EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min. js”> </script>
<!–Biblioteca jQuery de EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”> </script>
Ejemplo:
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>
<script type="text/javascript">
$(document).ready(function (){
$('#gfg').menu('show',{
left: 50,
top: 100
});
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>EasyUI jQuery menu widget</h3>
<div id="gfg" class="easyui-menu" style="width:120px;">
<div>menu 1</div>
<div>
<span>menu 2</span>
<div style="width:150px;">
<div><b>Sub menu 1</b></div>
<div>Sub menu 2</div>
<div>Sub menu 3</div>
</div>
</div>
<div>menu 3</div>
<div class="menu-sep"></div>
<div>menu 4</div>
</div>
</body>
</html>
Producción:
Widget de menú
Referencia: http://www.jeasyui.com/documentation/