jQueryEasyUI中文帮助手册.docx

1、jQueryEasyUI中文帮助手册jQuery EasyUI中文帮助手册API版本：1.2.4目录jQuery EasyUI中文帮助手册 1API版本：1.2.4 11. 基本 21.1 语法解析 2语法解析 21.2 简单载入器 2简单载入器 21.3 一般拖动 4可拖动 41.4 拖动至容器 5拖动至容器 51.5 缩放 6缩放 61.6 分页 7分页 71.7 搜索框 9搜索框 91.8 进度条 11进度条 112. 布局管理器 122.1 控制面板 122.2 选项卡 18选项卡切换 182.3 可伸缩面板 22可伸缩面板 222.4 布局面板 24布局面板 243. 菜单和按钮 2

2、73.1 菜单 27菜单 273.2 链接按钮 30链接按钮 303.3 菜单按钮 31菜单按钮 313.4 分隔按钮 32分隔按钮 324. 表单 334.1 表单 33表单 334.2 表单验证 35表单验证 354.3 自定义组合框 37自定义组合框 374.4 可装载组合框 39可装载组合框 394.5 组合树 42组合树 424.6 组合表格 43组合表格 434.7 数字验证框 45数字验证框 454.8 日期组合框 46日期组合框 464.9 日期时间组合框 48日期时间组合框 484.10 日历 49日历 494.11 调节器 51调节器 514.12 数字调节器 52数字调节

3、器 524.13 时间调节器 53时间调节器 535. 窗口 545.1 窗口 54窗口 545.2 对话窗口 56对话窗口 565.3 消息窗口 58消息窗口 586. 数据表格和树形菜单 606.1 数据表格 60数据表格 606.2 属性表格 69属性表格 696.3 树形菜单 69树形菜单 696.4 树形表格 75树形表格 751. 基本1.1 语法解析语法解析使用方法1. $.parser.parse();/解析所有的页面2. $.parser.parse(#cc);/解析特定的代码属性名称类型描述默认值$.parser.autoboolean（布尔型）定义是否自动解析easyui

4、组件。true事件名称参数描述$.parser.onCompletecontext当语法解析结束时触发事件。方法名称参数描述$.parser.parsecontext解析easyui组件。1.2 简单载入器简单载入器使用方法1. easyloader.base=./;/设置easyui根目录2. easyloader.load(messager,function()/载入特定模块3. $.messager.alert(Title,loadok);4. );属性名称类型描述默认值modules（模块）object（对象）预定义模块。locales（多语言）object（预定义对象）预定义多语言。

5、base（很目录）string（字符串）easyui根目录,必须以/结尾。easyui根目录将会被自动设置为相对于easyload.js的位置。theme（主题名称）string（字符串）themes目录中的主题的名称。defaultcss（层叠样式表）boolean（布尔型）定义是否在加载模块的同时加载css文件。truelocale（自定义语言）string（字符串）语言名称。nulltimeout（超时）number（数字）超时单位为毫秒，出现超时就触发。2000预定义语言 de（德语） en（英语） fr（法语） zh_CN（简体中文） zh_TW（繁体中文）事件名称参数描述onPro

6、gressname当一个模块成功载入时触发。onLoadname当一个模块及其所有依赖关系（可以理解为载入该模块所需要的其他模块、属性、方法等）载入时触发。方法名称参数描述loadmodule, callback载入特定的模块。当载入成功时将调用回调函数。有效的模块参数类型如下:单一的模块名称一个存储有模块名称的数组一个以.css结尾的样式文件一个以.js结尾的js文件1.3 一般拖动可拖动使用$.fn.draggable.defaults重载默认值。使用方法1. 2. title3. 1. $(#dd).draggable(2. handle:#title3. );属性名称类型描述默认值pr

7、oxy（替代）string,function拖动时的替代元素，当被设置为clone时，将使用该元素的一个复制元素来作为替代元素。如果指定了一个函数, 它将返回一个jquery对象。nullrevert（复原）boolean（布尔型）如果设置为true, 当拖动停止时元素将返回它的初始位置。falsecursor（指针）string（字符串）拖动时的CSS指针。movedeltaX（水平增量，X轴）number（数字）被拖动元素对应于当前指针的水平位置。nulldeltaY（垂直增量，y轴）number（数字）被拖动元素对应于当前指针的垂直位置。nullhandle（句柄）selector（选择

8、器）开始拖动的句柄。nulldisabled（停止拖动）boolean（布尔型）当设置为true时停止拖动。falseedge（边缘）number（数字）可以在其中拖动的容器的宽度0axis（拖动轴）string（字符串）可用值为v或者h,当设置为空时，元素可以同时在水平和垂直方法拖动。null事件名称参数描述onBeforeDrage在拖动之前触发，返回false将取消拖动。onStartDrage当目标对象开始被拖动时触发。onDrage在拖动过程中触发，当不能再拖动时返回false。onStopDrage当拖动停止时触发。方法名称参数描述optionsnone返回属性对象。proxyno

9、ne如果替代元素被设置，返回将被用于拖动的替代元素。enablenone允许拖动。disablenone禁止拖动。1.4 拖动至容器拖动至容器使用$.fn.droppable.defaults重载默认值。使用方法1. 1. $(#dd).droppable(2. accept:#d1,#d33. );属性名称类型描述默认值acceptselector决定哪个可拖动元素将会被接收。null事件名称参数描述onDragEntere,source当可拖动元素被拖入目标容器的时候触发，参数source是被拖动的DOM元素。onDragOvere,source当可拖动元素被拖至某个元素之上的时候触发，参

10、数source是被拖动的DOM元素。onDragLeavee,source当可拖动元素被拖离目标容器的时候触发，参数source是被拖动的DOM元素。onDrope,source当可拖动元素被拖入目标容器并放置的时候触发，参数source是被拖动的DOM元素。1.5 缩放缩放使用$.fn.resizable.defaults重载默认值。使用方法1. 1. $(#rr).resizable(2. maxWidth:800,3. maxHeight:6004. );属性名称类型描述默认值disabled（禁止缩放）boolean（布尔型）如果设置为true将禁止缩放。falsehandles（句柄

11、）string（字符串）说明缩放的方向，n表示向上（北）,e表示向右（东）等。n, e, s, w, ne, se, sw, nw, allminWidth（最小宽度）number（数字）缩放时所允许的最小宽度。10minHeight（最小高度）number（数字）缩放时所允许的最小高度。10maxWidth（最大宽度）number（数字）缩放时所允许的最大宽度。10000maxHeightnumber（数字）缩放时所允许的最大高度。10000edge（边界）number（数字）将被缩放的边框的边界。5事件名称参数描述onStartResizee当开始缩放时触发。onResizee在缩放过程中

12、触发，当返回false时, DOM元素将不再缩放。onStopResizee当缩放停止是触发。1.6 分页分页使用$.fn.pagination.defaults重载默认值。依赖关系 链接按钮使用指南1. 1. $(#pp).pagination(2. total:2000,3. pageSize:104. );属性名称类型描述默认值total（总数）number（数字）总记录数，当创建分页时必须设置。1pageSize（每页记录数）number（数字）每页显示的记录数。10pageNumber（当前页码）number（数字）当分页创建完毕时显示当前页码。1pageList（可选择的每页记录数

13、）array（数组）用户能够改变每页显示的记录数。10,20,30,50loading（是否正在载入）boolean（布尔型）定义数据是否正在载入。falsebuttons（按钮）array（数组）自定义按钮，每个按钮包含2个属性:iconCls： 显示背景图片的CSS类handler： 当按钮被点击时调用的一个句柄函数nullshowPageList（显示可选择的每页记录数）boolean（布尔型）定义是否显示可选择的每页记录数。trueshowRefresh（显示刷新）boolean（布尔型）定义是否显示刷新按钮。truebeforePageText（输入框之前的文本）string（字符串

14、）在输入框之前显示的符号。PageafterPageText（输入框之后的文本）string（字符串）在输入框之后显示的符号。of pagesdisplayMsg（显示信息）string（字符串）在插件右上方显示分页信息。Displaying from to to of total items事件名称参数描述onSelectPagepageNumber, pageSize当用户进行翻页时触发，回调函数包含2个参数:pageNumber： 下一页的页码pageSize： 下一页的显示记录数onBeforeRefreshpageNumber, pageSize刷新之前触发, 返回false将取消刷

15、新。onRefreshpageNumber, pageSize刷新之后触发。onChangePageSizepageSize当用户修改每页显示记录数时触发。方法名称参数描述optionsnone返回分页属性对象。loadingnone提醒分页插件正在载入。loadednone提醒分页插件已经载入。1.7 搜索框搜索框使用$.fn.searchbox.defaults重载默认值。依赖关系 菜单按钮使用方法创建搜索框1. 使用标签创建。对input标签引用easyui-searchbox类。1. 2. functionqq(value,name)3. alert(value+:+name)4. 5

16、. 6. 9. 10. AllNews11. SportsNews12. 2. 使用脚本创建。1. 2. 3. AllNews4. SportsNews5. 6. $(#ss).searchbox(7. width:200,8. searcher:function(value,name)9. alert(value+,+name)10. ,11. menu:#mm,12. prompt:PleaseInputValue13. );属性名称类型描述默认值width（宽度）number（数字）设置组建的宽度。autopropmt（提醒）string（字符串）显示在搜索框的提醒信息。value（值）

17、string（字符串）搜索框的默认值。menu（菜单）selector（选择器）搜索类型下拉菜单。nullsearcher（搜索器）function(value,name)当用户点击搜索按钮或者按下ENTER键的时候搜索函数将被调用。null方法名称参数描述optionsnone返回搜索框属性对象。menunone返回搜索类型菜单对象。textboxnone返回文本框对象。getValuenone返回当前搜索关键字。setValuevalue设置新的搜索关键字。getNamenone返回当前搜索类型。destroynone清除搜索框组件resizewidth重置搜索框组建的宽度。1.8 进度条

18、进度条使用$.fn.progressbar.defaults重载默认值。依赖关系 无使用方法创建进度条进度条组件可以通过html标签或脚本两种方法创建。使用html标签创建更容易，只需要对标签引用easyui-progressbar类。1. 获取/设置进度值为进度条获取当前进度值并且设置一个新的进度值。1. varvalue=$(#p).progressbar(getValue);2. if(value100)3. value+=Math.floor(Math.random()*10);4. $(#p).progressbar(setValue,value);5. 属性名称类型描述默认值wid

19、th（宽度）string（字符串）设置进度条的宽度。autovalue（值）number（数字）当前进度，百分比数值。0text（文本）string（字符串）显示在组件中的文本模板。value%事件名称参数描述onChangenewValue,oldValue当进度发生改变时触发。方法名称参数描述optionsnone返回进度条属性对象。resizewidth重置进度条。getValuenone返回当前进度值。setValuevalue设置一个新的进度值。2. 布局管理器2.1 控制面板使用$.fn.panel.defaults重载默认值。使用方法创建控制面板1. 使用标签创建控制面板使用标签

20、创建控制面板十分简单，只须要对标签引用easyui-panel类。1. 4. panelcontent.5. panelcontent.6. 2. 使用脚本创建控制面板下面的代码将创建一个工具栏在右上方的控制面板。1. 2. panelcontent.3. panelcontent.4. 5. $(#p).panel(6. width:500,7. height:150,8. title:MyPanel,9. tools:10. iconCls:icon-add,11. handler:function()alert(new)12. ,13. iconCls:icon-save14. hand

21、ler:function()alert(save)15. 16. );移动控制面板调用move方法可以将控制面板移动到一个新的位置。1. $(#p).panel(move,2. left:100,3. top:1004. );载入内容下面的代码将使用ajax载入控制面板内容并且在载入成功时显示信息。1. $(#p).panel(2. href:content_url.php,3. onLoad:function()4. alert(loadedsuccessfully);5. 6. );属性名称类型描述默认值title（标题）string（字符串）显示在控制面板顶部的标题文本。nullicon

22、Cls（图标CSS类）string（字符串）在控制面板标题前显示一个16x16大小图标的CSS类。nullwidth（宽度）number（数字）设置控制面板的宽度。autoheight（高度）number（数字）设置控制面板的高度。autoleft（左边距）number（数字）设置控制面板的左边距。nulltop（顶边距）number（数字）设置控制面板的顶边距。nullcls（类）string（字符串）对控制面板引用一个CSS类。nullheaderCls（头部css类）string（字符串）对控制面板头部引用一个CSS类。nullbodyCls（主体类）string（字符串）对控制面板主体引用一个CSS类。nullstyle（样式）object（对象）给控制面板添加一个自定义的样式。fit(铺满浏览器)boolean（布尔型）设置为true时，控制面板的大小将铺满它所在的容器（浏览器）。falseborder（边框）boolean（布尔型）定义是否显示控制面板边框。truedoSize（调整大小）boolean（布尔型）如果设置为true，在控制面板被创建时将被重置大小并且自动布局。truenoh