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. 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 archivo adecuadas durante la implementación del código.
Sitio web oficial de jQuery EasyUI:
https://www.jeasyui.com/index.php
Ejemplo 1: el siguiente código demuestra el diseño del formulario de usuario básico utilizando el marco jQuery EasyUI .
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="demo.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>
</head>
<body>
<h2>jQuery EasyUI basic user form</h2>
<div class="easyui-panel"
style="width:100%;max-width:400px;padding:30px 60px;">
<form id="formID" method="post">
<!-- Set class to form-floating-label for
special labels-->
<div class="form-floating-label form-field"
style="margin-bottom:20px">
<!-- easyui-textbox class is used -->
<input class="easyui-textbox"
name="name" style="width:100%"
data-options="label:'Name:',
required:true,
labelPosition:'top'">
</div>
<!-- set the data-options for HTML validation -->
<div class="form-floating-label form-field"
style="margin-bottom:20px">
<input class="easyui-textbox"
name="email" style="width:100%"
data-options="label:'Email ID:',
required:true,validType:'email',
labelPosition:'top'">
</div>
<div class="form-floating-label form-field"
style="margin-bottom:20px">
<!--set multiline to true for textarea-->
<input class="easyui-textbox"
name="message"
style="width:100%;height:60px"
data-options="label:'Message:',
multiline:true,
labelPosition:'top'">
</div>
<div class="form-floating-label form-field"
style="margin-bottom:20px">
<select class="easyui-combobox"
name="language" style="width:100%"
data-options="label:'Language:',
labelPosition:'top'">
<option value="ar">Arabic</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="el">Greek</option>
<option value="hi">Hindi</option>
<option value="ja">Japanese</option>
<option value="ko">Korean</option>
</select>
</div>
</form>
<div style="text-align:center;padding:5px 0">
<!--To create link using EasyUI -->
<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">
Reset
</a>
</div>
</div>
<script>
// Submit the form
function submitForm(){
$('#formID').form('submit');
}
// Reset the form
function clearForm(){
$('#formID').form('clear');
}
</script>
</body>
</html>
Producción:
- Antes de la ejecución:
- Después de la ejecución:
Ejemplo 2: el siguiente código muestra cómo cargar datos de formulario desde el archivo local actual y el archivo JSON remoto.
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="demo.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>
</head>
<body>
<h2>
jQuery EasyUI load
user form data
</h2>
<div class="easyui-panel"
style="width:100%;max-width:400px;
padding:30px 60px;">
<form id="formID" method="post">
<!--Set class to form-floating-label
for special labels-->
<div class="form-floating-label form-field"
style="margin-bottom:20px">
<!--easyui-textbox class is used-->
<input class="easyui-textbox"
name="name" style="width:100%"
data-options="label:'Name:',
required:true,labelPosition:'top'">
</div>
<!--set the data-options for HTML validation -->
<div class="form-floating-label form-field"
style="margin-bottom:20px">
<input class="easyui-textbox"
name="email" style="width:100%"
data-options="label:'Email ID:',
required:true,validType:'email',
labelPosition:'top'">
</div>
<div class="form-floating-label form-field"
style="margin-bottom:20px">
<!--set multiline to true for textarea-->
<input class="easyui-textbox"
name="message" style="width:100%;height:60px"
data-options="label:'Message:',multiline:true,
labelPosition:'top'">
</div>
<div class="form-floating-label form-field"
style="margin-bottom:20px">
<select class="easyui-combobox"
name="language" style="width:100%"
data-options="label:'Language:',
labelPosition:'top'">
<option value="ar">Arabic</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="el">Greek</option>
<option value="hi">Hindi</option>
<option value="ja">Japanese</option>
<option value="ko">Korean</option>
</select>
</div>
</form>
<div style="text-align:center;padding:5px 0">
<!-- To create link using EasyUI -->
<a href="javascript:void(0)"
class="easyui-linkbutton"
onclick="clearForm()">
Reset
</a>
<a href="javascript:void(0)"
class="easyui-linkbutton"
onclick="loadData()">
Load Data
</a>
<a href="javascript:void(0)"
class="easyui-linkbutton"
onclick="loadRemoteData()">
LoadRemote
</a>
</div>
</div>
<script>
// Reset the form
function clearForm(){
$('#formID').form('clear');
}
// Load data
function loadData(){
$('#formID').form('load',{
name:'Sahil',
email:'sahil@gmail.com',
message:'hello GFG',
language:'en'
});
}
// Load remote json file data
function loadRemoteData(){
$('#formID').form('load','form-data.json');
}
</script>
</body>
</html>
form-data.json: Los siguientes son los datos para el archivo «form-data.json» que se utiliza en el código anterior.
{
"name":"sandeep",
"email":"sandeep@gmail.com",
"message":"Hello GFG",
"language":"hi"
}
Producción:
Ejemplo 3: el siguiente código muestra cómo habilitar la validación mediante el complemento jQuery EasyUI .
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="demo.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>
</head>
<body>
<h2>
jQuery EasyUI load user form data
</h2>
<div class="easyui-panel"
style="width:100%;max-width:400px;padding:30px 60px;">
<!--set novalidate to true in data-options-->
<form id="formID" method="post"
data-options="novalidate:true">
<!--set class to form-floating-label for special labels-->
<div class="form-floating-label form-field"
style="margin-bottom:20px">
<!--easyui-textbox class is used -->
<input class="easyui-textbox"
name="name" style="width:100%"
data-options="label:'Name:',
required:true,labelPosition:'top'">
</div>
<!--set the data-options for HTML validation -->
<div class="form-floating-label form-field"
style="margin-bottom:20px">
<input class="easyui-textbox" name="email"
style="width:100%"
data-options="label:'Email ID:',
required:true,validType:'email',
labelPosition:'top'">
</div>
</form>
<div style="text-align:center;padding:5px 0">
<!--To create link using EasyUI -->
<a href="javascript:void(0)"
class="easyui-linkbutton"
onclick="submitForm()">
Submit
</a>
<a href="javascript:void(0)"
class="easyui-linkbutton"
onclick="clearForm()">
Reset
</a>
</div>
</div>
<script>
// submit the form
function submitForm(){
$('#formID').form('submit',{
onSubmit:function(){
return $(this)
.form('enableValidation')
.form('validate');
}
});
}
// Reset the form
function clearForm(){
$('#formID').form('clear');
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA