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 acordeón usando jQuery EasyUI. Accordion muestra una colección de paneles. Muestra uno o más de un panel de pestañas a la vez. Cada panel de pestañas tiene el título del encabezado y algunas herramientas de minibotones, incluido el botón de cerrar y otros botones personalizados.
Descargas para EasyUI para jQuery:
https://www.jeasyui.com/download/index.php
Sintaxis:
<div class="accordion"> </div>
Opciones de contenedores:
- ancho: el ancho del contenedor de acordeón.
- altura: La altura del contenedor de acordeón.
- ajuste: establezca en verdadero para establecer el tamaño del contenedor de acordeón para que se ajuste a su contenedor principal.
- border: Define si mostrar el borde.
- animar: define si mostrar el efecto de animación al expandir o contraer el panel.
- multiple: True para habilitar la expansión de varios paneles a la vez.
- seleccionado: el índice del panel seleccionado inicializado.
- halign: la alineación del encabezado del panel de acordeón.
Opciones de paneles:
- seleccionado: Establézcalo en verdadero para expandir el panel.
- plegable: Define si mostrar el botón plegable
Eventos:
- onSelect: se activa cuando se selecciona un panel.
- onUnselect: se activa cuando un panel no está seleccionado.
- onAdd: se activa cuando se agrega un nuevo panel.
- onBeforeRemove: se dispara antes de que se elimine un panel.
- onRemove: se activa cuando se elimina un panel.
Métodos:
- opciones: Devuelve las opciones de acordeón.
- paneles: Obtener todos los paneles.
- redimensionar: Redimensionar el acordeón.
- getSelected: Obtener el primer panel seleccionado.
- getSelections: Obtiene todos los paneles seleccionados.
- getPanel: Obtener el panel especificado.
- getPanelIndex: Obtiene el índice del panel especificado.
- seleccionar: seleccione el panel especificado.
- deseleccionar: deselecciona el panel especificado.
- añadir: Añadir un nuevo panel.
- remove: Quitar el panel especificado
Acercarse:
- Primero, agregue los scripts jQuery Easy UI necesarios para su proyecto.
<tipo de script=”texto/javascript” src=”jquery.min.js”>
</script>
<!–Bibliotecas jQuery de EasyUI –>
<tipo de script=”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> <h1>GeeksforGeeks</h1> <h3>how to make a basic accordion using jQuery UI?</h3> </head> <body> <div id="geek" class="easyui-accordion" style="width:300px;height:200px;"> <div title="gfg1"> Geeks </div> <div title="gfg2"> for </div> <div title="gfg3"> Geeks </div> </div> </body> </html>
Producción:
Referencia: http://www.jeasyui.com/documentation/