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 pestañas usando jQuery EasyUI. Pestañas para mostrar una colección de paneles. Solo muestra 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 cierre y otros botones personalizados.
Descargas para EasyUI para jQuery:
https://www.jeasyui.com/download/index.php
Sintaxis:
<div class="tabs"> </div>
Propiedades:
- ancho : se utiliza para establecer el ancho del contenedor de pestañas.
- altura : se utiliza para establecer la altura del contenedor de pestañas.
- plain : True para representar la tira de pestañas sin una imagen de contenedor de fondo.
- fit : True para establecer el tamaño del contenedor de pestañas para que se ajuste a su contenedor principal.
- border : True para mostrar el borde del contenedor de pestañas.
- scrollIncrement: se utiliza para establecer el número de píxeles para desplazarse cada vez que se presiona un botón de desplazamiento de pestaña.
- scrollDuration: Se utiliza para establecer la cantidad de milisegundos que debe durar cada animación de desplazamiento.
- herramientas: se utiliza para configurar la barra de herramientas colocada en el lado izquierdo o derecho del encabezado.
- toolPosition: se utiliza para establecer la posición de la barra de herramientas.
- tabPosition: se utiliza para establecer la posición de la pestaña.
- headerWidth: se utiliza para establecer el ancho del encabezado de la pestaña.
- tabWidth: se utiliza para establecer el ancho de la tira de pestañas.
- tabHeight: se utiliza para establecer la altura de la tira de pestañas.
- seleccionado: se utiliza para establecer el índice de la pestaña seleccionada inicializada.
- showHeader: verdadero para mostrar el encabezado de las pestañas.
- justificado: verdadero para hacer que las tiras de pestañas tengan el mismo ancho que su contenedor principal.
- estrecho: Verdadero para eliminar el espacio entre tiras de pestañas.
- pastilla: Verdadero para hacer que las tiras de pestañas parezcan pastillas.
Eventos:
- onLoad: se activa cuando un panel de pestañas Ajax termina de cargar datos remotos.
- onSelect: se activa cuando el usuario selecciona un panel de pestañas.
- onUnselect: se activa cuando el usuario anula la selección de un panel de pestañas.
- onBeforeClose: se activa antes de que se cierre el panel de pestañas
- onClose: se activa cuando el usuario cierra un panel de pestañas.
- onAdd: se activa cuando se agrega un nuevo panel de pestañas.
- onUpdate: se activa cuando se actualiza un panel de pestañas.
- onContextMenu: se activa cuando se hace clic con el botón derecho en un panel de pestañas.
Métodos:
- options: Se utiliza para devolver las opciones de las pestañas.
- pestañas: Se utiliza para devolver todos los paneles de pestañas.
- cambiar el tamaño: se utiliza para cambiar el tamaño del contenedor de pestañas y hacer el diseño.
- add: Se utiliza para Agregar un nuevo panel de pestañas.
- cerrar: Se utiliza para cerrar un panel de pestañas.
- getTab: se utiliza para obtener el panel de pestañas especificado.
- getTabIndex: se utiliza para obtener el índice del panel de pestañas especificado
- getSelected: Se utiliza para Obtener el panel de pestañas seleccionado.
- select: Se utiliza para seleccionar un panel de pestañas.
- deseleccionar: Sirve para seleccionar un panel de pestañas.
- showHeader: Se utiliza para mostrar el encabezado de las pestañas.
- hideHeader: Se utiliza para ocultar el encabezado de las pestañas.
- showTool: Sirve para mostrar las herramientas de las pestañas.
- hideTool: Se utiliza para Ocultar las herramientas de las pestañas.
- existe: Se utiliza para indicar si existe el panel especial
- actualizar: se utiliza para actualizar el panel de pestañas especificado.
- enableTab: se utiliza para habilitar el panel de pestañas especificado.
- disabledTab: se utiliza para deshabilitar el panel de pestañas especificado.
- scrollBy: se utiliza para desplazar el encabezado de la pestaña por la cantidad especificada de píxeles.
Acercarse:
- 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').tabs('show', {
borders: true
});
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>EasyUI jQuery tabs widget</h3>
<div id="tabs" class="easyui-tabs"
style="width:500px;height:450px;">
<div title="gfg1">
first tab
</div>
<div title="gfg2">
second tab
</div>
<div title="gfg3">
third tab
</div>
</div>
</body>
</html>
Producción:
Referencia: http://www.jeasyui.com/documentation/