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.
Descargue todos los archivos precompilados necesarios del sitio web oficial y guárdelos en su carpeta de trabajo. Tenga cuidado con las rutas de los archivos durante la implementación del código.
https://www.jeasyui.com/download/index.php
Ejemplo 1: El siguiente ejemplo muestra un formulario de usuario simple con campos de texto animados con etiquetas flotantes. Varias clases que son específicas del marco EasyUI, como easyui -panel, easyui-textbox y easyui-linkbutton, se utilizan para los controles de entrada. Para las etiquetas flotantes en el formulario de usuario, se usa la clase form-floating-label como se muestra a continuación.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css"
href="themes/material-blue/easyui.css">
<link rel="stylesheet" type="text/css"
href="themes/icon.css">
<link rel="stylesheet" type="text/css"
href="demo.css">
<script type="text/javascript"
src="jquery.min.js">
</script>
<script type="text/javascript"
src="jquery.easyui.min.js">
</script>
<script type="text/javascript"
src="plugins/jquery.validatebox.js">
</script>
<script type="text/javascript"
src="plugins/jquery.textbox.js">
</script>
</head>
<body>
<h2>
Animated text fields with
floating labels
</h2>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style=
"width:100%;max-width:400px;padding:30px 60px;">
<form id="formID" method="post">
<div class="form-floating-label form-field"
style="margin-bottom:20px">
<input class="easyui-textbox" name="name"
style="width:100%" data-options=
"label:'Name:',labelPosition:'top'">
</div>
<div class="form-floating-label form-field"
style="margin-bottom:20px">
<input class="easyui-textbox" name="email"
style="width:100%" data-options=
"label:'Email:',labelPosition:'top',
validType:'email'">
</div>
<div class="form-floating-label form-field"
style="margin-bottom:20px">
<input class="easyui-textbox" name="message"
style="width:100%;min-height:100px"
data-options="label:'Message:',
labelPosition:'top',multiline:true">
</div>
</form>
<div style="text-align:center;padding:5px 0">
<a href="javascript:void(0)"
class="easyui-linkbutton"
onclick="submitForm()" style="width:80px">
Submit
</a>
<a href="javascript:void(0)"
class="easyui-linkbutton"
onclick="clearForm()" style="width:80px">
Clear
</a>
</div>
</div>
<script>
function submitForm() {
$('#formID').form('submit');
}
function clearForm() {
$('#formID').form('clear');
}
function err(target, message) {
var target = $(target);
if (target.hasClass('textbox-text')) {
target = target.parent();
}
var msg = target.next('.error-message');
if (!msg.length) {
msg = $('<div class="error-message"></div>')
.insertAfter(target);
}
msg.html(message);
}
</script>
</body>
</html>
Producción:
- Antes de la entrada del usuario
- Después de la entrada del usuario
Ejemplo 2: El siguiente ejemplo demuestra la carga de datos locales y datos remotos. También demuestra la validación del formulario de usuario utilizando las bibliotecas del marco EasyUI . Se utilizan las mismas clases que en el ejemplo anterior. La clase utilizada para combobox es easyui-combox . Consulte la imagen o el video de salida para una mejor comprensión.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css"
href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="themes/icon.css">
<link rel="stylesheet" type="text/css"
href="demo.css">
<script type="text/javascript"
src="jquery.min.js"></script>
<script type="text/javascript"
src="jquery.easyui.min.js"></script>
</head>
<body>
<h2>Load Form Data using jEasyUI </h2>
<p>Click to load data</p>
<div style="margin:20px 0;" id="loadDataDivID">
<a href="javascript:void(0)"
class="easyui-linkbutton"
onclick="loadData()">
Load Data
</a>
<a href="javascript:void(0)"
class="easyui-linkbutton"
onclick="loadDataFromFile()">
Load Remote Data
</a>
<a href="javascript:void(0)"
class="easyui-linkbutton"
onclick="clearFormFields()">
Clear Form
</a>
</div>
<div class="easyui-panel" style="width:100%;
max-width:400px;padding:30px 60px;">
<form id="formID" method="post">
<div style="margin-bottom:20px">
<input class="easyui-textbox"
name="name" style="width:100%"
data-options="label:'Name:',
required:true">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox"
name="email" style="width:100%"
data-options="label:'Email:',
required:true,validType:'email'">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox"
name="message" style="width:100%;height:60px"
data-options="label:'Message:',multiline:true">
</div>
<div style="margin-bottom:20px">
<select class="easyui-combobox" name="language"
label="Language" style="width:100%">
<option value="zh-cht">Chinese</option>
<option value="nl">Dutch</option>
<option value="en" selected="selected">
English
</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="hi">Hindi</option>
<option value="id">Indonesian</option>
<option value="it">Italian</option>
<option value="ja">Japanese</option>
<option value="ko">Korean</option>
<option value="ru">Russian</option>
<option value="es">Spanish</option>
<option value="vi">Vietnamese</option>
</select>
</div>
<div style="margin-bottom:20px">
<label for="accept" class="textbox-label">
Accept:
</label>
<input id="acceptID" type="checkbox"
name="accept" value="true">
</div>
</form>
<div style="text-align:center;padding:5px 0">
<a href="javascript:void(0)"
class="easyui-linkbutton"
onclick="submitFormData()"
style="width:80px">
Submit
</a>
</div>
</div>
<script>
function submitFormData() {
$('#formID').form('submit', {
onSubmit: function () {
return
$(this).form('enableValidation')
.form('validate');
}
});
}
function loadData() {
$('#formID').form('load', {
name: 'username',
email: 'usermail@gmail.com',
message: 'usermessage',
language: 'en',
accept: true
});
}
function loadDataFromFile() {
$('#formID').form('load', 'file_data.json');
}
function clearFormFields() {
$('#formID').form('clear');
}
</script>
</body>
</html>
file_data.json Los siguientes son los datos JSON para el archivo «file_data.json» utilizado en la función loadDataFromFile() del código HTML anterior.
{
"name":"Tom",
"email":"tom@gmail.com",
"message":"Tom's Message",
"language":"hi",
"accept":"true"
}
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
- Validación de formulario:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA