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 numérico usando jQuery EasyUI. El cuadro numérico permite al usuario agregar un valor numérico en un cuadro.
Descargas para EasyUI para jQuery:
https://www.jeasyui.com/download/index.php
Sintaxis:
<input class="easyui-numberbox">
Propiedades:
- disabled: Define si deshabilitar el campo.
- valor: el valor predeterminado.
- min: El valor mínimo permitido.
- max: El valor máximo permitido.
- precisión: la precisión máxima que se muestra después del separador decimal.
- decimalSeparator: el carácter decimal separa las partes enteras y decimales de un número. .
- groupSeparator: el carácter que separa grupos de enteros para mostrar miles y millones.
- prefijo: La string de prefijo.
- sufijo: La string de sufijo.
- filtro: Define cómo filtrar la tecla pulsada.
- formateador: una función para formatear el valor del cuadro numérico.
- analizador: una función para analizar una string.
Métodos:
- opciones: devuelve las opciones del cuadro numérico.
- destroy: destruye el objeto numberbox.
- deshabilitar: Deshabilitar el campo.
- habilitar: habilitar el campo.
- fix: corrige el valor a un valor válido.
- setValue: establece el valor del cuadro numérico.
- getValue: Obtiene el valor del cuadro numérico.
- clear: Borrar el valor del cuadro numérico.
- restablecer: restablecer el valor del cuadro numérico.
Eventos:
- onChange:
Enfoque: 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> <h1>GeeksforGeeks</h1> <h3>how to make a basic numberbox using jQuery UI?</h3> </head> <body> <input class="easyui-numberbox" value="123" label="Number:" > </body> </html>
Producción:
Referencia: http://www.jeasyui.com/documentation/