easyUI笔记.docx
- 文档编号:8161223
- 上传时间:2023-01-29
- 格式:DOCX
- 页数:24
- 大小:22KB
easyUI笔记.docx
《easyUI笔记.docx》由会员分享,可在线阅读,更多相关《easyUI笔记.docx(24页珍藏版)》请在冰豆网上搜索。
easyUI笔记
EasyUI是jquery的UI插件,多用于企业级开发和网站后台管理,而jquery的UI是用于前台。
学习条件Jquery的基础
支持扩展
同类产品:
DWZ(国产,开源),ExtJS(独立,付费);
版本兼容问题:
不推荐兼容IE6,IE7,IE8
导入:
jquery.min.js
jquery.easyui.min.js
easyui-lang-zh_cn.js(汉化)
themes/default/easyui.css(默认皮肤)
themes/icon.css(图标样式)
themes/color.css(颜色样式)
使用EasyUI:
普通加载
引入文件
只能加载
--
//自定义js文件
-->
加载UI组件的方法:
class方式加载
class=easyui-组件名称
200px;height:
100">
内容部分
使用JS调用加载(推荐):
200px;height:
100">
内容部分
$(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解析,必须设置父类容器才可以解析到
$(function(){
$.parser.parse('#demo');
});
内容
Draggable组件:
加载方式
属性列表
事件列表
方法列表
--
300px;height:
200px;background-color:
pink">
300px;height:
200px;background-color:
gray">
拖动标题
-->
拖动的属性:
revert:
true,
handle:
'#drag',//只有drag中的内容可以拖动
disable:
true,
拖动的事件:
e---->event事件
onBeforeDrag()
onStartDrag()
onDrag()
onStopDrag()
onbefore():
function(e){
alert(e);
};
onBeforeDrag():
function(e){
alert('拖动前触发');
};
onbeforeDrag():
function(e){
returnfalse;//禁止拖动
}
方法列表:
$('#demo').draggable('disable');
$('#demo').draggable('enable');
alert($('#demo').draggable('options'));
console.log($('#demo').draggable('options'));
--
$(function(){
$('#demo2').draggable({
revert:
true,
handle:
'#drag',
disable:
true
});
})
-->
resizable组件
/*
$('#demo4').resizable({
maxWidth:
600,
maxHeight:
600,
onStartResize:
function(e){
alert(e);
console.log('开始触发');
},
})
*/
//console.log($('demo3).resizable('options'));
tooltip提示框组件:
title
content
onShow显示的时候触发
onHid隐藏的时候出发
"type="input"name="username">
$('input').tooltip({
content:
"Thecontentisrequired!
",
});
linkbutton组件:
plain:
显示一个简洁效果
text:
按钮文字
iconCls:
'icon-add'
按钮1
按钮2
$('#demo').linkbutton({
plain:
true,
})
progressbar进度条组件:
value:
60
width:
height:
text:
设置进度条百分比的模板,不推荐改动!
onChange:
function(newValue,oldValue){
}
setValue
options:
返回对象属性
修改进度条的默认值:
$.fn.progressbar.default.value=30;
40,width:
300">
setTimeOut(function(){
$('#demo').progressbar('setValue',70);
},1000);
setInterval(fn,time);
$('#demo').progressbar({
width:
300,
onChange:
function(newValue,oldValue){
console.log(newValue,oldValue);
},
});
window.setInterval(function(){
$('#demo').progressbar('setValue',$('#demo').progressbar('getValue')+5);
},500);
panel面板组件:
true"title="面板"style="width:
300px;height:
200px">
文本内容
title
width
heigth
iconCls
fit:
自适应
border:
是否显示边框
noheader:
面板标题
content:
修改内容
collapsible:
是否显示折叠按钮
minimizable:
是否显示最小化按钮
maximizable:
是否显示最大化按钮
closable:
关闭按钮
tools:
工具栏设置
300px;height:
200px">
alert('add')">
alert('delete')">
alert('edit')">
alert('find')">
$('#demo').panel({
title:
'面板',
content:
"文本内容",
collapsible:
true,
minimizable:
true,
maximizable:
true,
closable:
true,
tools:
"#tools",
})
vararr=['saab','Volo','Bmw'];
for(iinarr){
alert(arr[i]);
};
tabs选项卡组件:
依赖于panel和linkbutton组件
300px;height:
200px">
he
she
it
plain
fit
border
tools
tabPosition:
top(默认),left/right/bottom
$('#demo').tabs({
width:
300,
height:
200,
tabPosition:
'left'
plain:
true,
fit:
true,
});
according分类组件:
依赖于panel组件
300px;height:
200px">
a
b
c
according=容器属性+面板属性
width
heigth
fit
border
animate:
展开和折叠是否显示动画效果(默认是有)
multiple:
是否同时展开多个面板
onSelect:
function(title,index){};
$('#demo').accordion({
width:
500,
height:
600,
fit:
true,
animate:
true,
multiple:
true,
});
layout组件:
依赖于panel和resizable组件
重点区域面板属性
title
border
split每个面包可以自动调整大小
iconCls
collapsible默认是true
600px;height:
400px">
'north',title:
'top',split:
true,iconCls:
'icon-help'"style="height:
60px">
'south',title:
'bottom',split:
true"style="height:
60px">
'east',title:
'right',split:
true"style="width:
50px">
'west',title:
'left',split:
true"style="width:
50px">
'center',title:
'center',split:
true">
window组件:
依赖draggable和resizable组件,实现布局功能。
iconCls
modal模态
title
collapsible
width
heigth
closable
minizable
maximizable
draggable
resizable
shadow
true,resizable:
false"style="width:
600px;height:
400px">
$('#demo').window({
title:
'tom',
modal:
true,
draggable:
false,
resizable:
false
});
600px;height:
400px">
true">
'center'">content
'west'"style="width:
80px">left
'south',border:
false"style="height:
100px">
'icon-ok'"style="width:
60px">确定
'icon-cancel'"style="width:
60px">取消
dialog:
依赖于window和linkbutton组件
因为默认值不同导致每个组件的语义不同
width
heigth
title
modal
toolbar:
'#tt'
buttons:
texticonClshandler
300,height:
200">
true">文件
true">编辑
true">帮助
$('#demo').dialog({
width:
400,
height:
200,
modal:
true,
toolbar:
[{
text:
'编辑',
iconCls:
'icon-edit',
handler:
function(){
alert('edit');
},
},{
text:
'删除',
iconCls:
'icon-remove',
handler:
function(){
alert('remove');
},
}]
});
message:
依赖于window和progressbar组件
$.message.alert(title,question,info,warning,fn(异步))
警告框
$.messager.alert('提示框','是否确认?
','info',function(){
alert("已经成功删除!
");
});
确认框
$.messager.confirm('确认框','你真的要删除吗',function(flag){
if(flag){
alert('删除成功');
}
})
输入框
$.messager.prompt('提示框','请输入你的名字',function(content){
if(content){
alert(content);
}
})
进度条:
$.messager.progress({
title:
'执行中',
msg:
'上传文件中',
interval:
1000
//默认为300毫秒
})
消息框:
$.messager.show({
title:
'提示消息',
msg:
'修改成功',
timeout:
500
})
menu:
不依赖于其他组件
menubutton:
依赖于menu和linkbutton组件
'icon-save',menu:
'#nest'">文件
'icon-remove'">增加
'icon-add'">删除
'icon-edit'">修改
$('#demo').menubutton({
text:
'文件',
iconCls:
'icon-search',
menu:
'#nest'
})
splitbutton组件:
依赖menu和linkbutton组件
类似于menubutton,只是多了一个分节符
pagination:
依赖于linkbutton组件
total
pageSize
pageNumber
layout
showRefresh
pageList[10,20,30]默认设置
onSelectPage:
function(pageNumber,pageSize){
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
-
easyUI
笔记
冰豆网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。