EasyUI的使用
jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。简而言之，EasyUI的使用通过查看api文档，想要的样式只需id名和class名一样就可以使用，通过 data-options选择你需要的属性即可。
EasyUI使用
- 1 将EasyUI提供的js文件和主题（themes）样式存放到项目的指定位置
- 2 在Html文档中引入EasyUI的插件,引用路径为相对路径
- 3在HTML文档标签上遵循EasyUI的文档规则使用EasyUI完成页面的开发
- 面板使用(panel)：
- 创建面板：
- 在创建一个div标签，并class属性值为：”easyui-panel”
- 面板属性:
- data-options：给面板添加常用的操作。具体参照API
- 添加按钮
- 信息提示
- 创建面板：
- 注意：
- EasyUI的使用
- 通过标签的class属性添加基本EasyUI功能，包括样式和jQuery操作
- data-options属性对标签的基本功能进行修改操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81<html>
<head>
<title>登录</title>
<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" />
<!--引入jQuery文件-->
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!--引入EasyUi的js文件-->
<script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
<!--声明css代码域-->
<style type="text/css">
table{
margin: auto;
margin-top: 20px;
}
tr{
height: 40px;
text-align: center;
}
</style>
<!--声明js代码域-->
<script type="text/javascript">
/*校验登录信息*/
$(function(){
//登录校验
$("#btnCon").click(function(){
//校验用户信息
if($(":text").val()==""){
//使用EasyUI的信息框进行提示
$.messager.alert('登录提示',"用户名不能为空！","warning");
}else if($(":password").val()==""){
//使用EasyUI的信息框进行提示
$.messager.alert('登录提示',"密码不能为空！","warning");
}else{
$("form").submit();
}
})
//重置
$("#btnCan").click(function(){
$("form").get(0).reset();
})
})
</script>
</head>
<body>
<div id="panel_login" style="margin: auto;width: 500px;margin-top: 100px;">
<!--创建登录面板-->
<div id="login" class="easyui-panel" title="登录" data-options="iconCls:'icon-mlogin',minimizable:true,maximizable:true
,collapsible:true,closable:true" style="width: 500px;height: 200px;">
<form action="02_main.html" method="get">
<table>
<tr>
<td>用户名:</td>
<td>
<input type="text" name="uname"/>
</td>
</tr>
<tr>
<td>密 码:</td>
<td>
<input type="password" name="pwd" />
</td>
</tr>
<tr>
<td colspan="2">
<a id="btnCon" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save'">登录</a>
<a id="btnCan" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">重置</a>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259<html>
<head>
<title>主页面</title>
<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" />
<!--引入jQuery文件-->
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!--引入EasyUi的js文件-->
<script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
<!--
主页面:
1 引入EasyUI插件
2 使用body布局方式
3 将布局后的每块区域完成内容填充
-->
<style type="text/css">
#sdiv {
text-align: center;
font-size: 14px;
font-weight: bold;
line-height: 30px;
background-color: gray;
}
/*修改头部标题样式*/
#n_title {
color: white;
font-size: 14px;
line-height: 40px;
}
/*修改标题超链接样式*/
#n_title a {
text-decoration: none;
color: white;
}
#n_title a:hover {
color: orange;
}
/*修改密码样式*/
#div_pwd table {
margin: auto;
margin-top: 10px;
}
#div_pwd table tr {
height: 40px;
text-align: center;
}
</style>
<!--声明js代码域-->
<script type="text/javascript">
/*网页js功能*/
$(function() {
//退出功能
$("#n_title_out").click(function() {
//提示用户是否确定退出
$.messager.confirm("确认对话框", "你真的要退出吗？", function(r) {
//退出
if (r) {
window.location.href = "01_login.html";
}
})
})
//修改密码
$("#n_title_pwd").click(function() {
//打开修改密码窗口
$("#div_pwd").window("open");
})
//确认修改密码
$("#btnCon").click(function() {
//校验原有密码
if ($(":password:eq(0)").val() == "") {
$.messager.alert("原有密码", "原有密码不能为空！", "warning");
} else if ($(":password:eq(1)").val() == "") {
//校验新密码
$.messager.alert("新密码", "新密码不能为空！", "warning");
} else if ($(":password:eq(2)").val() == "") {
//校验确认密码
$.messager.alert("确认密码", "确认密码不能为空！", "warning");
} else if ($(":password:eq(1)").val() != $(":password:eq(2)").val()) {
//校验两次密码
$.messager.alert("密码校验", "两次密码不一致！", "error");
} else {
//关闭密码窗口
$("#div_pwd").window("close");
//$.messager.alert("密码修改","密码修改成功！","info");
$.messager.show({
title: '密码修改',
msg: '密码修改成功，新密码为:'+$(":password:eq(2)").val(),
timeout: 3000,
showType: 'slide'
});
}
})
//取消密码修改
$("#btnCan").click(function(){
$("#div_pwd").window("close");
})
//树状菜单和选项卡的联动
//给菜单添加单击事件
$("#treeMenu").tree({
onClick:function(node){
//控制台打印node内容
//console.log(node);
//获取attributes属性,判断是菜单还是菜单描述
var attrs=node.attributes;
if(attrs==null || attrs.url==''){
return;
}
//判断选项卡是否存在
var has=$("#div_tabs").tabs("exists",node.text);
if(has){
//选中存在的选项卡
$("#div_tabs").tabs("select",node.text);
}else{
//创建新的选项卡面板
$("#div_tabs").tabs("add",{
title:node.text,
closable:true,
content:"<iframe src="+attrs.url+" style='width:100%;height:98%' frameborder='0'/>"
})
}
}
})
})
/*
Json数据格式
{"键名":"值","键名":"值",...........}
{
"键名":"值",
"键名":"值",
...........
}
*
*
* */
</script>
</head>
<body class="easyui-layout">
<!--布局：北-->
<div data-options="region:'north'" style="height: 50%;background-image: url(img/layout-browser-hd-bg.gif);">
<!--添加网站Logo-->
<span id="n_logo" style="margin-left: 20px;">
<img src="img/blocks.gif" width="35px" style="margin-top: 5px;"/>
<font color="white" size="4px">506班级管理系统</font>
</span>
<span id="n_title" style="float: right;">
欢迎 admin登录
<a id="n_title_pwd" href="javascript:void(0)">修改密码</a>|
<a id="n_title_out" href="javascript:void(0)">退出</a>
</span>
</div>
<!--布局：南-->
<div id="sdiv" data-options="region:'south',border:false" style="height:35%;">
©2008-2018 506班级网站,仿冒必纠
</div>
<!--布局：西-->
<div data-options="region:'west',title:'系统菜单',split:true" style="width: 200px;">
<!--分类效果实现-->
<div class="easyui-accordion" data-options="fit:true,border:false">
<div id="" title="常用网站" >
<!--创建菜单-->
<ul id="treeMenu" class="easyui-tree">
<li>
<span>购物网站</span>
<!--二级-->
<ul>
<li data-options="attributes:{url:'http://www.taobao.com'}">淘宝网</li>
<li data-options="attributes:{url:'http://www.jd.com'}">京东网</li>
<li data-options="attributes:{url:'http://www.suning.com'}">苏宁易购</li>
</ul>
</li>
<li>
<span>学习网站</span>
<ul>
<li data-options="attributes:{url:'http://www.bjsxt.com'}">北京尚学堂</li>
<li data-options="attributes:{url:'http://www.baidu.com'}">百度一下</li>
<li data-options="attributes:{url:'http://www.so.com'}">360搜索</li>
</ul>
</li>
<li>
<span>娱乐网站</span>
<ul>
<li>斗鱼</li>
<li>虎牙</li>
<li>熊猫</li>
</ul>
</li>
</ul>
</div>
<div id="" title="个人收藏">
菜单二
</div>
<div id="" title="系统信息">
菜单三
</div>
</div>
</div>
<!--布局：中间-->
<div data-options="region:'center'">
<!--选项卡使用-->
<div id="div_tabs" class="easyui-tabs" data-options="fit:true,border:false">
<!--首页-->
<div id="" title="首页" style="background-image:url(img/body.jpg) ;background-size: cover;">
</div>
</div>
</div>
<!--创建修改密码窗口-->
<div id="div_pwd" class="easyui-window" title="修改密码" style="width: 400px;height: 250px;" data-options="collapsible:false,minimizable:false,maximizable:false,closed:true,modal:true">
<table>
<tr>
<td>原有密码:</td>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td>新密码:</td>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td colspan="2">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save'">确认修改</a>
<a id="btnCan" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">取消</a>
</td>
</tr>
</table>
</div>
</body>
</html>
- EasyUI的使用
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Kylin！
![微信]()
微信![支付寶]()
支付寶
相关推荐
评论
