easyUI笔记.docx

1、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: 普通加载 引入文件 只能

2、加载 !- /自定义js文件 - 加载UI组件的方法： class方式加载 class = easyui - 组件名称 内容部分 使用JS调用加载(推荐): 内容部分 $(function() $(#demo2).dialog(); ); 一般推荐使用第二种方式，因为一个UI组件有很多属性和方法，如果使用class的用法将极大的不便。 JS和HTML分离原则，提高代码可读性！ 智能加载(不推荐)： 使用easyload.js替换easyui.min.js+easyui.css 只加载需要的组件，而不是全部，提高网页加载速度。 parser解析器： 所有UI的渲染解析器,渲染各种UI组件，自动完

3、成，可以设置手动渲染! 关闭渲染(jquery加载之前设置)： $.parser.auto = false ; 加载完成之后执行(jquery加载之后设置)： $.parser.onComplete = function() alert(UI解析完毕); ; 渲染制定组件： 使用指定UI解析，必须设置父类容器才可以解析到 $(function() $.parser.parse(#demo); ); 内容 Draggable组件： 加载方式 属性列表 事件列表 方法列表 !- 拖动标题 - 拖动的属性： revert:true, handle:#drag,/只有drag中的内容可以拖动 disa

4、ble: true, 拖动的事件：e - event事件 onBeforeDrag() onStartDrag() onDrag() onStopDrag() onbefore() : function(e) alert(e); ; onBeforeDrag() : function(e) alert(拖动前触发); ; onbeforeDrag() : function(e) return false ; /禁止拖动 方法列表： $(#demo).draggable(disable); $(#demo).draggable(enable); alert($(#demo).draggable(

5、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

6、(options); tooltip提示框组件： title content onShow显示的时候触发 onHid隐藏的时候出发 $(input).tooltip( content:The content is required!, ); linkbutton组件： plain:显示一个简洁效果 text:按钮文字 iconCls:icon-add 按钮1 按钮2 $(#demo).linkbutton( plain:true, ) progressbar进度条组件： value:60 width: height: text:设置进度条百分比的模板,不推荐改动！ onChange : fun

7、ction(newValue,oldValue) setValue options:返回对象属性 修改进度条的默认值： $.fn.progressbar.default.value = 30; setTimeOut(function() $(#demo).progressbar(setValue,70); ,1000); setInterval(fn,time); $(#demo).progressbar( width:300, onChange : function(newValue,oldValue) console.log(newValue,oldValue); , ); window.

8、setInterval(function() $(#demo).progressbar(setValue,$(#demo).progressbar(getValue)+5); ,500); panel面板组件： 文本内容 title width heigth iconCls fit:自适应 border:是否显示边框 noheader:面板标题 content:修改内容 collapsible:是否显示折叠按钮 minimizable:是否显示最小化按钮 maximizable:是否显示最大化按钮 closable:关闭按钮 tools:工具栏设置 $(#demo).panel( title:

9、面板, content:文本内容, collapsible:true, minimizable:true, maximizable:true, closable:true, tools:#tools, ) var arr = saab,Volo,Bmw; for(i in arr) alert(arri); ; tabs选项卡组件：依赖于panel和linkbutton组件 he she it plain fit border tools tabPosition:top（默认),left/right/bottom $(#demo).tabs( width:300, height:200, ta

10、bPosition:left plain:true, fit:true, ); according分类组件：依赖于panel组件 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和

11、resizable组件 重点区域面板属性 title border split每个面包可以自动调整大小 iconCls collapsible默认是true window组件：依赖draggable和resizable组件，实现布局功能。 iconCls modal模态 title collapsible width heigth closable minizable maximizable draggable resizable shadow $(#demo).window( title:tom, modal:true, draggable:false, resizable:false );

12、 content left 确定 取消 dialog: 依赖于window和linkbutton组件 因为默认值不同导致每个组件的语义不同 width heigth title modal toolbar:#tt buttons:text iconCls handler 文件 编辑 帮助 $(#demo).dialog( width:400, height:200, modal : true, toolbar : text : 编辑, iconCls : icon-edit, handler : function() alert(edit); , , text : 删除, iconCls :

13、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(提

14、示框,请输入你的名字,function(content) if(content) alert(content); ) 进度条： $.messager.progress( title : 执行中, msg : 上传文件中, interval : 1000 /默认为300毫秒 ) 消息框： $.messager.show( title : 提示消息, msg : 修改成功, timeout : 500 ) menu:不依赖于其他组件 menubutton:依赖于menu 和 linkbutton组件 文件 增加 删除 修改 $(#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)