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 el diseño básico y complejo para cualquier página web utilizando el complemento jQuery EasyUI .
Descargas para EasyUI para jQuery:
https://www.jeasyui.com/download/index.php
Nota: Tenga cuidado con las rutas de archivo adecuadas al implementar los siguientes códigos.
Ejemplo 1: El siguiente ejemplo demuestra el diseño de diseño básico para los datos de los estudiantes usando el marco jQuery EasyUI. Los datos de los estudiantes están en formato JSON .
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 layout with all direction regions </h2> <!-- easyui-layout class is used --> <div class="easyui-layout" style ="width:700px;height:350px;"> <div data-options="region:'north'" style="height:50px"></div> <!-- Set split to "true" for separate region--> <div data-options="region:'south',split:true" style="height:50px;"> </div> <div data-options="region:'east',split:true" title="East" style="width:100px;"> </div> <div data-options="region:'west',split:true" title="West" style="width:100px;"> </div> <div data-options="region:'center',title:'EasyUI layout for student data',iconCls:'icon-ok'"> <!-- easyui-datagrid class is used for tabular data--> <table class="easyui-datagrid" data-options= "url:'datafile.json',method:'get',border:false, singleSelect:true,fit:true,fitColumns:true"> <thead> <tr> <th data-options="field:'studentid'" width="80">Student ID </th> <th data-options="field:'studentname'" width="100">Name</th> <th data-options="field:'marksscored', align:'right'" width="80"> Marks </th> <th data-options="field:'age',align:'right'" width="80">Age </th> <th data-options="field:'gender', align:'center'" width="60"> Gender </th> </tr> </thead> </table> </div> </div> </body> </html>
datafile.json: el siguiente es el contenido del archivo «datafile.json» utilizado en el código anterior.
{
"total": 10,
"rows": [
{
"studentname": "Komal", "age": 10, "gender": "F",
"marksscored": 365, "studentid": "ST-1"
},
{
"studentname": "Dalton", "age": 12, "gender": "M",
"marksscored": 185, "studentid": "ST-10"
},
{
"studentname": "Rakesh", "age": 12, "gender": "M",
"marksscored": 385, "studentid": "ST-11"
},
{
"studentname": "Ram", "age": 12, "gender": "M",
"marksscored": 265, "studentid": "ST-12"
},
{
"selected": true, "studentname": "Ila", "age": 12,
"gender": "F", "marksscored": 355, "studentid": "ST-13"
},
{
"studentname": "Manika", "age": 12, "gender": "F",
"marksscored": 158, "studentid": "ST-14"
},
{
"studentname": "Madhavi", "age": 12, "gender": "F",
"marksscored": 456, "studentid": "ST-15"
},
{
"studentname": "Preity", "age": 12, "gender": "M",
"marksscored": 235, "studentid": "ST-16"
},
{
"studentname": "Parul", "age": 12, "gender": "F",
"marksscored": 564, "studentid": "ST-17"
},
{
"studentname": "Amar", "age": 19, "gender": "F",
"marksscored": 638, "studentid": "ST-18"
}
]
}
Producción:
- Antes de ejecutar:
- Después de ejecutar:
Ejemplo 2: El siguiente ejemplo demuestra el diseño de un diseño complejo para cualquier página web utilizando el marco jQuery EasyUI. El siguiente código utiliza los archivos «htmlContent.html», «dataTree.json» y «datafile.json» utilizados para datos
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 complex layout design</h2> <!-- easyui-layout class is used--> <div class="easyui-layout" style= "width:700px;height:350px;"> <div data-options="region:'north'" style="height:50px"> </div> <!-- set split data-option to "true" for separate region--> <div data-options="region:'south',split:true" style="height:50px;"> </div> <div data-options="region:'east',split:true" title="Right" style="width:180px;"> <!-- easyui-tree class is used for file tree structure --> <ul class="easyui-tree" data-options= "url:'dataTree.json',method:'get', animate:true,dnd:true"> </ul> </div> <div data-options="region:'west',split:true" title="Left" style="width:100px;"> <!-- easyui-accordion class is used for toggled menu--> <div class="easyui-accordion" data-options="fit:true,border:false"> <div title="Algorithms" style="padding:10px;"> Algorithms </div> <div title="Python" data-options="selected:true" style="padding:10px;"> Python </div> <div title="Perl" style="padding:10px"> Perl </div> </div> </div> <div data-options="region:'center', title:'Complex layout'"> <div class="easyui-tabs" data-options= "fit:true,border:false,plain:true"> <div title="About" data-options= "href:'htmlContent.html'" style="padding:10px"> </div> <div title="DataGrid" style="padding:5px"> <table class="easyui-datagrid" data-options="url:'datafile.json', method:'get',singleSelect:true, fit:true,fitColumns:true"> <thead> <tr> <th data-options= "field:'studentid'" width="80"> Student ID </th> <th data-options= "field:'studentname'" width="100"> Name </th> <th data-options= "field:'marksscored', align:'right'" width="80"> Marks </th> <th data-options= "field:'age',align:'right'" width="80"> Age </th> <th data-options= "field:'gender',align:'center'" width="60"> Gender </th> </tr> </thead> </table> </div> </div> </div> </div> </body> </html>
htmlContent.html: el siguiente es el contenido del archivo «htmlContent.html» utilizado en el código anterior.
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <p style="font-size:12px"> HTML content for Python. </p> <ul> <li> Python is a high-level, general -purpose and a very popular programming language. </li> <li> Python programming language (latest Python 3) is being used in web development, </li> <li> Machine Learning applications, along with all cutting edge technology in Software Industry. </li> <li> Python Programming Language is very well suited for Beginners, </li> <li> also for experienced programmers with other programming languages like C++ and Java. </li> </ul> </body> </html>
dataTree.json: el siguiente es el contenido del archivo «dataTree.json» utilizado en el código anterior.
[{
"id":1,
"text":"Users",
"children":[{
"id":11,
"text":"Photos",
"state":"closed",
"children":[{
"id":101,
"text":"Family"
},{
"id":102,
"text":"Colleagues"
},{
"id":103,
"text":"Relatives"
}]
},{
"id":12,
"text":"Program Files",
"children":[{
"id":131,
"text":"Intel"
},{
"id":132,
"text":"nodejs",
"attributes":{
"p1":"my Attribute1",
"p2":"my Attribute2"
}
},{
"id":133,
"text":"Common files"
},{
"id":134,
"text":"Mail",
"checked":true
}]
},{
"id":13,
"text":"home.html"
},{
"id":14,
"text":"tutorials.html"
},{
"id":15,
"text":"jobs.html"
}]
}]
Producción:
- Antes de ejecutar:
- Después de ejecutar:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA