easyUI笔记Word下载.docx
《easyUI笔记Word下载.docx》由会员分享，可在线阅读，更多相关《easyUI笔记Word下载.docx（24页珍藏版）》请在冰豆网上搜索。
对话框标题"
style="
width:
200px;
height:
100"
内容部分
/div>
使用JS调用加载（推荐）:
demo2"
$（function（）{
$（'
#demo2'
）.dialog（）;
}）;
一般推荐使用第二种方式，因为一个UI组件有很多属性和方法，如果使用class的用法将极大的不便。
JS和HTML分离原则，提高代码可读性！
智能加载（不推荐）：
使用easyload.js替换easyui.min.js+easyui.css
只加载需要的组件，而不是全部，提高网页加载速度。
parser解析器：
所有UI的渲染解析器,渲染各种UI组件，自动完成，可以设置手动渲染!
关闭渲染（jquery加载之前设置）：
$.parser.auto=false;
加载完成之后执行（jquery加载之后设置）：
$.parser.onComplete=function（）{
alert（'
UI解析完毕'
）;
};
渲染制定组件：
使用指定UI解析，必须设置父类容器才可以解析到
$.parser.parse（'
#demo'
<
demo"
<
divclass="
<
span>
内容<
/span>
Draggable组件：
加载方式
属性列表
事件列表
方法列表
--
demo1"
easyui-draggable"
300px;
background-color:
pink"
align="
center"
300px;
200px;
gray"
<
h2id="
drag"
拖动标题<
/h2>
拖动的属性：
revert:
true,
handle:
'
#drag'
//只有drag中的内容可以拖动
disable:
true,
拖动的事件：
e---->
event事件
onBeforeDrag（）
onStartDrag（）
onDrag（）
onStopDrag（）
onbefore（）:
function（e）{
alert（e）;
};
onBeforeDrag（）:
alert（'
拖动前触发'
onbeforeDrag（）:
returnfalse;
//禁止拖动
}
方法列表：
$（'
）.draggable（'
disable'
enable'
alert（$（'
options'
））;
console.log（$（'
--
$（function（）{
$（'
）.draggable（{
revert:
handle:
disable:
true
}）;
}）
-->
resizable组件
/*
$（'
#demo4'
）.resizable（{
maxWidth:
600,
maxHeight:
onStartResize:
console.log（'
开始触发'
},
}）
*/
//console.log（$（'
demo3）.resizable（'
tooltip提示框组件：
title
content
onShow显示的时候触发
onHid隐藏的时候出发
<
inputid="
data-options="
"
easyui-tooltip"
Thecontentisrequired!
input"
name="
username"
$（'
input'
）.tooltip（{
content:
}）;
linkbutton组件：
plain:
显示一个简洁效果
text:
按钮文字
iconCls:
icon-add'
easyui-linkbutton"
按钮1<
按钮2<
）.linkbutton（{
plain:
progressbar进度条组件：
value:
60
width:
height:
设置进度条百分比的模板,不推荐改动！
onChange:
function（newValue,oldValue）{
}
setValue
options:
返回对象属性
修改进度条的默认值：
$.fn.progressbar.default.value=30;
easyui-progressbar"
value:
40,width:
300"
setTimeOut（function（）{
）.progressbar（'
setValue'
70）;
},1000）;
setInterval（fn,time）;
）.progressbar（{
width:
300,
onChange:
console.log（newValue,oldValue）;
}）;
window.setInterval（function（）{
$（'
getValue'
）+5）;
},500）;
panel面板组件：
easyui-panel"
closable:
true"
面板"
height:
200px"
文本内容
width
heigth
iconCls
fit:
自适应
border:
是否显示边框
noheader:
面板标题
修改内容
collapsible:
是否显示折叠按钮
minimizable:
是否显示最小化按钮
maximizable:
是否显示最大化按钮
closable:
关闭按钮
tools:
工具栏设置
tools"
aclass="
icon-add"
onclick="
javascript:
alert（'
add'
）"
/a>
icon-remove"
delete'
icon-edit"
edit'
icon-search"
find'
）.panel（{
title:
面板'
content:
文本内容"
collapsible:
minimizable:
maximizable:
closable:
tools:
#tools"
vararr=['
saab'
'
Volo'
Bmw'
];
for（iinarr）{
alert（arr[i]）;
};
tabs选项卡组件：
依赖于panel和linkbutton组件
easyui-tabs"
divtitle="
T1"
he<
T2"
she<
divtitle=T3>
it<
plain
fit
border
tools
tabPosition:
top（默认）,left/right/bottom
）.tabs（{
height:
200,
tabPosition:
left'
fit:
according分类组件：
依赖于panel组件
easyui-accordion"
A"
a<
B"
b<
C"
c<
according=容器属性+面板属性
animate:
展开和折叠是否显示动画效果（默认是有）
multiple:
是否同时展开多个面板
onSelect:
function（title,index）{};
）.accordion（{
500,
600,
animate:
multiple:
true,
layout组件：
依赖于panel和resizable组件
重点区域面板属性
title
border
split每个面包可以自动调整大小
iconCls
collapsible默认是true
easyui-layout"
600px;
400px"
divdata-options="
region:
north'
title:
top'
split:
true,iconCls:
icon-help'
"
60px"
south'
bottom'
east'
right'
50px"
west'
true"
center'
title:
window组件：
依赖draggable和resizable组件，实现布局功能。
modal模态
collapsible
closable
minizable
maximizable
draggable
resizable
shadow
easyui-window"
modal:
true,resizable:
false"
）.window（{
tom'
modal:
draggable:
false,
resizable:
false
fit:
content<
80px"
left<
border:
false"
100px"
iconCls:
icon-ok'
确定<
icon-cancel'
取消<
dialog:
依赖于window和linkbutton组件
因为默认值不同导致每个组件的语义不同
modal
toolbar:
#tt'
buttons:
texticonClshandler
300,height:
200"
spanclass="
plain:
文件<
编辑<
帮助<
）.dialog（{
400,
modal:
toolbar:
[{
text:
'
编辑'
iconCls:
icon-edit'
handler:
function（）{
alert（'
},
},{
删除'
icon-remove'
remove'
}]
message：
依赖于window和progressbar组件
$.message.alert（title,question,info,warning,fn（异步））
警告框
$.messager.alert（'
提示框'
是否确认?
info'
function（）{
alert（"
已经成功删除!
确认框
$.messager.confirm（'
确认框'
你真的要删除吗'
function（flag）{
if（flag）{
删除成功'
}）
输入框
$.messager.prompt（'
请输入你的名字'
function（content）{
if（content）{
alert（content）;
}
}）
进度条：
$.messager.progress（{
title:
执行中'
msg:
上传文件中'
interval:
1000
//默认为300毫秒
消息框：
$.messager.show（{
提示消息'
修改成功'
timeout:
500
menu:
不依赖于其他组件
menubutton:
依赖于menu和linkbutton组件
easyui-menubutton"
icon-save'
menu:
#nest'
nest"
增加<
删除<
修改<
）.menubutton（{
text:
文件'
iconCls:
icon-search'
menu:
splitbutton组件：
依赖menu和linkbutton组件
类似于menubutton，只是多了一个分节符
pagination:
依赖于linkbutton组件
total
pageSize
pageNumber
layout
showRefresh
pageList[10,20,30]默认设置
onSelectPage:
function（pageNumber,pageSize）{
升级会员 