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ú lateral usando jQuery EasyUI. El menú lateral se utiliza para menús verticales contextuales. Es el componente base para construir otro componente de menú. 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="sidemenu"> </div>
Propiedades:
- ancho: el ancho del componente del menú lateral.
- altura: La altura del componente del menú lateral.
- borde: Define mostrar el borde.
- animar: Define si mostrar el efecto de animación al expandir o contraer los menús.
- múltiple: se establece en verdadero para habilitar la expansión de múltiples paneles a la vez.
- data: Los datos del menú a mostrar.
- floatMenuWidth: el ancho del menú flotante.
- floatMenuPosition: la posición del menú flotante.
Eventos:
Métodos:
- options : Devuelve las opciones del menú lateral.
- redimensionar : Cambiar el tamaño del menú lateral.
- colapsar : Colapsa el menú lateral.
- expandir : Expande el menú lateral.
- destroy : Destruye el menú lateral.
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').sidemenu({
text: "GeeksforGeeks"
});
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>EasyUI jQuery sidemenu widget</h3>
<div id="gfg" class="easyui-sidemenu"
data-options="data:data">
</div>
<script type="text/javascript">
var data = [{
text: 'Item1',
children: [{
text: 'Geeks1'
},{
text: 'Geeks2'
},{
text: 'Geeks3',
children: [{
text: 'For3.1'
},{
text: 'For3.2'
}]
}]
},{
text: 'Item2',
children: [{
text: 'Geeks4'
},{
text: 'Geeks5'
},{
text: 'Geeks6'
}]
}];
</script>
</body>
</html>
Producción:
Referencia: http://www.jeasyui.com/documentation/