HTML
CSS
JavaScript
ajax
jquery
Flash
extjs
easyUI
...
CSS 浏览器支持的效果不一样
JavaScript 浏览器支持效果不一样
JQuery UI 提供的UI都比较散
....
项目实际情况决定界面要求
EasyUI介绍
2.1 简介
EasyUI是一个基于Jquery的一个页面组件，里面包含了项目中大部分需要使用的组件(数据显示表格、分页、布局容器、对话框等)，
可以进行开源的使用和开发。
2.2 下载
http://www.jeasyui.com/
2.3 包结构
demo 样例
locale 国际化资源文件包
plugins 插件包
src 源码包
themes 主题包
2.4 学习
参见官方的文档
使用
入门示例
项目加入相关的css及等相关文件，
页面引用相关的css及js，重点是红色部分，如下：
"Content-Type" content="text/html; charset=utf-8" />
"stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
"stylesheet" type="text/css" href="easyui/themes/icon.css">
"text/javascript" src="easyui/jquery.easyui.min.js">
说明: meta用来定义页面有关元素
加入easyUI页面组件，测试是否正常
"dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"
data-options="iconCls:'icon-save',resizable:true,modal:true,onOpen:function(){;}">
Dialog Content. aa
"text/javascript">
$(function(){
$('#dd').dialog("setTitle","我的对话框");
});
说明，
easyUI组件定义方式: class=" easyui-dialog"
属性使用方式：data-options="属性名：值[，属性名：值]"
事件使用方式：data-options=" 事件名:function(参数列表){}"
js里创建控件或使用属性与事件：$('selector').控件名({'属性名':'属性值'[,'属性名':'属性值']});
方法使用方式：$('selector').plugin('method', parameter); //'selector'为jquery选择器对象
创建方式二
"dd">Dialog Content.
"text/javascript">
$(function() {
$('#dd').dialog({
title : 'My Dialog',
width : 400,
height : 200,
closed : false,
cache : false,
//href: 'get_content.php',
modal : true,
onOpen : function() {
;
}
});
$('#dd').dialog("setTitle", "我的对话框");
});
完整页面代码：
"Content-Type" content="text/html; charset=utf-8" />
"stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
"stylesheet" type="text/css" href="easyui/themes/icon.css">
"text/javascript" src="easyui/jquery.min.js">
"text/javascript" src="easyui/jquery.easyui.min.js">
"dd">Dialog Content.
"text/javascript">
$(function() {
$('#dd').dialog({
title : 'My Dialog',
width : 400,
height : 200,
closed : false,
cache : false,
//href: 'get_content.php',
modal : true,
onOpen : function() {
;
}
});
$('#dd').dialog("setTitle", "我的对话框");
});
easyUI布局
基于div创建
说明：fit:true，自动适应父容器
"cc" class="easyui-layout" data-options="fit:true" style="width:600px;height:400px;">
"region:'north',title:'North Title',split:true" style="height:100px;">
"region:'south',title:'South Title',split:true" style="height:100px;">
"region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;">
"region:'west',title:'West',split:true" style="width:100px;">
"region:'center',title:'center title'" style="padding:5px;background:#eee;">
完整页面创建
页面将会自动最大化
"easyui-layout" id="cc">
"region:'north',title:'North Title',split:true" style="height:100px;">
"region:'south',title:'South Title',split:true" style="height:100px;">
"region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;">
"region:'west',title:'West',split:true" style="width:100px;">
"region:'center',title:'center title'" style="padding:5px;background:#eee;">
属性说明
minWidth等属性在split设置为true时才能起作用
折叠面板
$('#cc').layout('collapse','east');
添加区域
$('#cc').layout("add",{
region:'west',
title:'系统',
split:true,
width:100
});
easyUI折叠菜单
创建
注意style="overflow:auto"使用，可以在导航页不够时，自动出现滚动条
"aa" class="easyui-accordion" style="width:300px;height:200px;">
"Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
#0099FF;">Accordion for jQuery
Accordion is a part of easyui framework for jQuery.
It lets you define your accordion component on web page more easily.
"Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
content2
"Title3">
content3
属性说明
事件说明
onSelect事件
$(function(){
$('#aa').accordion({
onSelect:function(title,index){
;
}
});
});
onAdd事件
"text/javascript">
$(function(){
$('#aa').accordion({
onAdd:function(title,index){
;
}
});
});
//添加新面板，用来触发onAdd事件
function add(){
$('#aa').accordion('add', {
title: '新标题',
content: '新内容',
selected: false
});
}
"aa" class="easyui-accordion" data-options="fit:true,animate:false" style="width:300px;height:200px;">
"Title1" data-options="iconCls:'icon-save',selected:true" style="padding:10px;">
#0099FF;">Accordion for jQuery
Accordion is a part of easyui framework for jQuery.
It lets you define your accordion component on web page more easily.
"Title2" data-options="iconCls:'icon-reload'" style="padding:10px;">
content2
"Title3" data-options="iconCls:'icon-reload'" >
"button" onClick="add()" value="add"/>
常用方法说明
$('#aa').accordion("select",'Title1');
$('#aa').accordion("remove",'Title1');
$('#aa').accordion("add",{
title: '新标题',
content: '新内容',
selected: false
});
easyUI按钮
创建
方式一：
"btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">easyui
方式二：
"btn" href="#">easyui
"text/javascript">
$(function(){
$('#btn').linkbutton({
iconCls: 'icon-search'
});
});
属性说明（全）
toggle:设置为true时，可以支持同时选择多个按钮（选中后按键一般颜色会不一样，可判断），
事件说明：
元素内使用
"#" class="easyui-linkbutton" data-options="iconCls:'icon-search'"
οnclick="">easyui
jquery方式使用
$(function(){
$('#btn').linkbutton({
text:'女',
iconCls: 'icon-ok',
toggle:true,
group:'sex',
plain:true,
iconAlign:'right'
});
//使用jquery方式绑定
$('#btn').bind('click', function(){
;
});
});
方法使用
略
easyUI选项卡
创建
"tt" class="easyui-tabs" style="width:500px;height:250px;">
"Tab1" style="padding:20px;display:none;">
tab1
"Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
tab2
"Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
tab3
属性说明
scrollIncrement：需要多个面板，并且宽度不够时才能出效果
事件说明
方法使用
;
选项卡面板
属性
| collapsible | boolean | 如果为true，则允许选项卡摺叠。 |
选项卡摺叠：指点击选项卡面板标题会把内容收起
课堂练习
界面编程能力训练
设计系统首页，通过layout进行整体布局
通过导航菜单完成主要内容的变化
easyUI窗体
消息窗体
$(function(){
$.messager.;
$.messager.confirm('确认','您确认想要删除记录吗？',function(r){
if (r){
;
}
});
});
对话框
创建
方式一
"dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"
data-options="iconCls:'icon-save',resizable:true,modal:true">
Dialog Content.
方式二：
"dd">Dialog Content.
"text/javascript">
$(function() {
$('#dd').dialog({
title : 'My Dialog',
width : 400,
height : 200,
closed : false,
cache : false,
//href: 'get_content.php',
modal : true,
onOpen : function() {
;
}
});
$('#dd').dialog("setTitle", "我的对话框");
});
属性说明
事件说明
方法说明
easyUI表格与分页
创建
方式一：
"easyui-datagrid">
"field:'code'">编码
"field:'name'">名称
"field:'price'">价格
方式二：
测试数据：
datagrid_data.json
{"total":28,"rows":[
{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]}
创建数据表格
"dg">
$(function(){
$('#dg').datagrid({
url:'datagrid_data.json',
columns:[[
{field:'productid',title:'Code',width:100},
{field:'productname',title:'Name',width:100},
{field:'unitcost',title:'Price',width:100,align:'right'}
]]
});
});
属性
要使用列排序，如下
sortName:'unitcost',
sortOrder:'desc',
需要设置：remoteSort:false,并设置列属性：sortable:true,
事件：
单击行事件
双击行事件
方法：
添加行
删除行
获取行数据
练习
1. 完成数据表格的数据加载，表格分页功能
2.并完成对表格增、删、改功能
easyUI树
需要使用json文件读取数据及部署项目到tomcat，启动tomcat
准备
节点属性说明：
· id：节点ID，对加载远程数据很重要。
· text：显示节点文本。
· state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。
· checked：表示该节点是否被选中。
· attributes: 被添加到节点的自定义属性。
· children: 一个节点数组声明了若干节点。
tree_data.json
[{
"id":1,
"text":"My Documents",
"children":[{
"id":11,
"text":"Photos",
"state":"closed",
"children":[{
"id":111,
"text":"Friend"
},{
"id":112,
"text":"Wife"
},{
"id":113,
"text":"Company"
}]
},{
"id":12,
"text":"Program Files",
"children":[{
"id":121,
"text":"Intel"
},{
"id":122,
"text":"Java",
"attributes":{
"p1":"Custom Attribute1",
"p2":"Custom Attribute2"
}
},{
"id":123,
"text":"Microsoft Office"
},{
"id":124,
"text":"Games",
"checked":true
}]
},{
"id":13,
"text":"index.html"
},{
"id":14,
"text":"about.html"
},{
"id":15,
"text":"welcome.html"
}]
}]
创建
方式一：
"tt" class="easyui-tree">
| 001 | name1 | 2323 |
| 002 | name2 | 4612 |
Folder
-
-
Sub Folder 1
-
-
"#">File 11
-
-
File 12
-
-
File 13
-
-
-
-
File 2
-
-
File 3
-
File21
方式二：
"tt">
$(function(){
$('#tt').tree({
checkbox:true,
url:'tree_data.json'
});
});
属性
事件
方法
获取所有选中节点的方法的使用示例
"button" id="btn" value="test" onClick="testGetNodes()"/>
...
function testGetNodes(){
var nodes = $('#tt').tree("getChecked");
for(var i=0;i
;
}
}
新增节点、移除节点
easyUI表单与控件
创建
"ff" method="post">
"name">Name:
"easyui-validatebox" type="text" name="name" data-options="required:true" />
"email">Email:
"easyui-validatebox" type="text" name="email" data-options="validType:'email'" />
属性
事件
方法
表单提交
新建servlet,并配置信息到web.xml中
sevlet关键代码：
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("---------------this is servlet---------------");
request.getRequestDispatcher("/index.jsp").forward(request, response);
}
web.xml配置
TestServlet
cn.itcast.servlets.TestServlet
TestServlet
/testServlet
提交表单
function mySubmit(){
$('#ff').form("submit",{
url: 'testServlet',
onSubmit: function(){
;
return true;
},
success: function(data){
;
}
});
}
练习
1。完成主体页面布局、菜单、及主要页面分页功能，并进行整合
2。尝试在ssm组合中整合easyui，并简单测试使用
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
