一、EasyUI简介
是一组依据JQuery的UI插件集合
主要作用:为JQuery对象提供新的不二法门,达成新的听从
可以快捷创设出简洁、友好、美观的页面,卓殊适合做网站后台管理页面(不够理想,不相符做前台页面)
官方文档:http://www.jeasyui.com/documentation/index.php
二、panel组件的创制
分两步:
1,引入要求的体制文件和js文件
<link rel=”styleSheet” type=”text/css”
href=”easyui的体制地址”>
<link rel=”styleSheet” type=”text/css”
href=”easyui的图标样式地址”>
<script type=”text/javascript”
src=”easyui/jquery.min.js”></script>
<script type=”text/javascript”
src=”easyui/jquery.easyui.min.js”></script>
2,
格局一,通过安装元素的class属性创设EasyUI控件
示例代码:
<div class=”easyui-panel”
data-options=”title:’面板组件’,width:300,height:185″>
<p>内容</p>
</div>
情势二,通过js代码创立EasyUI控件
//调用对象的panel属性,利用{key1:value1,key2:value2}键值对的花样举行添加
$(document).ready(function(){
$(“#div01”).panel({
width:300,
height:185,
title:’面板组件’,
context:’内容’
});
});
三、panel的属性
EasyUI组件的习性用来指定组件的体制、结构、内容等
title: 指定panel的标题
width 指定panel的宽度
height 指定panel的高度
fit 设置panel的尺寸是或不是适应父容器,值是true只怕false
//注意是父容器
border 设置panel是都显得边框 值是true或然false
collapsible 设置是还是不是出示可折叠按钮,值是true可能false
closeable 设置是还是不是出示关闭按钮,值是true只怕false
href 加载另一个页面的内容
注意:被加载页面的body之外的故事情节会被忽略!!
注意:很多组件属性的成效也足以选用HTML成分属性可能CSS样式属性的办法来促成
在标签内部写style属性,大概<style></style>写CSS代码
四、panel的轩然大波性质
onBeforeCollapse panel折叠前触发,可以在事件处理函数中截留折叠
onCollapse panel折叠后触发
注意:panel事件属于组件的习性,使用上也是以键值对的花样
示例代码:
onBeforeCollapse: function () {
var ss = confirm(“是不是真的要折叠”);
if(ss){
}else{
return false;
}
}
五、panel的方法
setTitle 设置标题
open 打开
close 关闭
options 可以查看参数
组件的主意的调用格式:
jQuery对象.panel方法(方法名,参数列表);
示例代码:
$(“#btn01”).click(function () {
$(“#input01”).panel(“setTitle”,”新标题”)
});
$(“#btn02”).click(function () {
$(“#input01”).panel(“close”);
});
$(“#btn03”).click(function () {
$(“#input01”).panel(“open”);
});
六、EasyUI的图标
使用方式:data-options属性中指定iconCls:’图标名称’
示例代码:
iconCls:’icon-add’
七、链接按钮
EasyUI经常把一个超链接改造成一个按钮的体裁使用,称之为linkbutton组件。
注意,是将一个超链接举行更改
特点:圆角、可添加图标、美观、可以增进事件
连接按钮属性:
disable 是或不是可以点击,值是true只怕false,true为不得以被点击
iconCls 可以选拔图标
示例代码:
<a class=”easyui-linkbutton”
data-options=”disable:true,iconCls:icon-add”>add</a>
注意:不要遗忘导入easyui的文本(多个样式属性、jQuery和easyUI)
事件性质:
onClick
示例代码:
$(document).ready(function(){
$(“a”).linkbutton(“disable”,true);
});
八、表单控件
EasyUI封装了很多表单控件,主如若提供数据有效性校验效率
validatebox控件
属性:required、validType、invalidMessage、validateOnBlur
textbox控件
datebox控件 属性:formatter
datetimebox控件
form控件 属性:url、success、onSubmit 方法:submit、validate
九、window组件
window组件用来弹出一个子窗口,方便添加、修改等操作
窗口组件基于panel组件
常用属性:href、width、height
十、tabs标签页组件
tabs标签页可以当做由七个panel组成,但同一时间只展示一个panel的内容
tabs组件的机要操作有:成立新tab页、接纳tab页
<div id=”tt” class=”easyui-tabs”
data-options=”width:600,height:371″>
<div title=”Tab1″>
tab1 content
</div>
<div title=”Tab2″ data-options=”closable:true”>
tab2 content
</div>
</div>
属性:fit是不是填充父成分
方法:add、exists、select
十一、tree组件
tree组件一般用来做系统导航栏
<ul class=”easyui-tree”>
<li>
<span>Folder1</span>
<ul>
<li><span>File1</span></li>
<li><span>File2</span></li>
</ul>
</li>
<li>
<span>Folder2</span>
<ul>
<li><span>File4</span></li>
<li><span>File5</span></li>
</ul>
</li>
</ul>
很多时候使用那种方式为节点添加点击动作:
<li>
<span>
<a href=”#” onClick=”xx()”>File1</a>
</span>
</li>
十二、layout布局组件
EasyUI布局组件把页面分为上、下、左、右、中间5个区域,分别名为north、south、west、east、center,每一种区域实际是个panel组件
layout组件可以行使在<body>上也可以动用在<div>上
<body class=”easyui-layout”>
<div data-options=”region:’north’,title:’North
Title’,split:true” style=”height:100px;”></div>
<div data-options=”region:’south’,title:’South
Title’,split:true” style=”height:100px;”></div>
<div data-options=”region:’east’,title:’East’,split:true”
style=”width:100px;”></div>
<div data-options=”region:’west’,title:’West’,split:true”
style=”width:100px;”></div>
<div data-options=”region:’center’,title:’center title'”
style=”background:#eee;”></div>
</body>
十三、datagrid数据表格
属性:url、pagination、toolbar、loadFilter
方法:load、reload
<table class=”easyui-datagrid”
data-options=”title:’用户管理’,pagination:true,width:600″ >
<thead>
<tr>
<th
data-options=”field:’email’,width:140″>登录邮箱</th>
<th
data-options=”field:’name’,width:120″>真实姓名</th>
<th
data-options=”field:’phone’,width:120″>手机号码</th>
<th
data-options=”field:’school’,width:120″>结业院校</th>
</tr>
</thead>
</table>
每回进行分有人操作,都会向url属性指定的路线发送请求,请求参数有page、rows
十四、结束语
EasyUI的机要内容就是非同一般组件的用法:panel、linkbutton、form、window、tabs、tree、layout、datagrid等
这几个组件基本满意大家对此后台管理体系项目标布局、导航、列表、添加、修改、删除等作用
学习的时候假设学习那么些组件就可以了,假若在其后的干活中接纳到EasyUI的其余零件,可以参见官方文档