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 cuadro de texto usando jQuery EasyUI. El cuadro de texto se usa para ingresar texto en un formulario
Descargas para EasyUI para jQuery:
https://www.jeasyui.com/download/index.php
Sintaxis:
<input class="easyui-textbox">
Propiedades:
- ancho: El ancho del componente.
- altura: La altura del componente.
- cls: agregue una clase CSS al cuadro de texto.
- aviso: El mensaje de aviso que se mostrará en el cuadro de entrada.
- valor: el valor predeterminado.
- tipo: El tipo de cuadro de texto.
- etiqueta: el selector de etiquetas vinculado al cuadro de texto.
- labelWidth: El ancho de la etiqueta.
- labelPosition: La posición de la etiqueta.
- labelAlign: La alineación de la etiqueta.
- multilínea: Define un cuadro de texto multilínea.
- editable: Define si el usuario puede escribir texto directamente en el campo.
- disabled: Define si el campo necesita ser deshabilitado.
- readonly: Define si el componente es de solo lectura.
- iconos: Los iconos adjuntos al cuadro de texto.
- iconCls: el icono de fondo que se muestra en el cuadro de texto.
- iconAlign: Define la posición de los iconos.
- iconWidth: El ancho del icono.
- buttonText: el texto que se muestra del botón que se adjunta al cuadro de texto.
- buttonIcon: el icono de visualización del botón que se adjunta al cuadro de texto.
- buttonAlign: Posición del botón.
Eventos:
- onChange : este evento se activa cuando se cambia el valor del campo.
- onResize : este evento se activa cuando se cambia el tamaño del cuadro de texto.
- onClickButton : este evento se activa cuando el usuario hace clic en el botón.
- onClickIcon : este evento se activa cuando el usuario hace clic en un icono.
Métodos:
- opciones: Devuelve el objeto de opciones.
- cuadro de texto: Devuelve el objeto del cuadro de texto.
- button: Devuelve el objeto del botón.
- destroy: destruye el componente de cuadro de texto.
- redimensionar: Redimensionar el ancho del componente.
- deshabilitar: deshabilitar el componente.
- habilitar: habilitar el componente.
- readonly: habilitar/deshabilitar el modo de solo lectura.
- clear: Borra el valor del componente.
- restablecer: restablecer el valor del componente.
- initValue: inicializa el valor del componente.
- setText: establece el valor del texto que se muestra.
- getText: Obtener el valor del texto que se muestra.
- setValue: establece el valor del componente.
- getValue: Obtiene el valor del componente.
- getIcon: Obtener el objeto de icono especificado.
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').textbox({
buttonText:'Search'
});
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>EasyUI jQuery textbox widget</h3>
Enter name : <input id="gfg" class="easyui-textbox">
</body>
</html>
Producción:
Referencia: http://www.jeasyui.com/documentation/