如何使用jQuery EasyUI为网页设计复杂的布局
EasyUI是一个HTML5框架,用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。
它有助于为交互式网络和移动应用程序构建功能,为开发人员节省大量时间。
在这篇文章中,我们将学习如何使用jQuery EasyUI插件为任何网页设计基本和复杂的布局。
EasyUI for jQuery的下载:
https://www.jeasyui.com/download/index.php
注意:在执行以下代码时请注意正确的文件路径。
示例1:下面的例子演示了使用jQuery EasyUI框架为学生数据进行的基本布局设计。学生数据是以JSON形式存在的。
<!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:以下是上述代码中使用的 “datafile.json “文件的内容。
{
"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"
}
]
}
输出:
- Before execute:
- After execute:
例子2:下面的例子演示了使用jQuery EasyUI框架为任何网页设计一个复杂的布局。下面的代码使用 “htmlContent.html”,”dataTree.json “和 “datafile.json “文件用于数据的检索。参考文件的树状结构
<!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:以下是上述代码中使用的 “htmlContent.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:以下是上述代码中使用的 “dataTree.json “文件的内容。
[{
"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"
}]
}]
输出:
- Before execute:
- After execute: