课程代码easyUI课件

第一章：easyUI初识1.1 easyui介绍A. EasyUI是基于jquery的，集成了各种用户界面插件。B. 帮助web开发者轻松打造出功能丰富且美观的UI框架。C. 完美支持HTML5D. EasyUI很简答但功能强大E. 不需要写很多代码，只需要通过编写简单的html，就可以定义用户界面，虽简单但功能强大F. 对浏览器低版本不支持1.2 下载easyui的api EasyUI官方下载地址：/download/index.php，目前最新的版本是：jQuery EasyUI 。下载完成之后，得到压缩包，解压后，得到一个【jquery-easyui-】文件夹，里面有如下图所示的文件：1.3 搭建easyUI环境步骤一：创建项目，在项目中引入easyUI的解压包（所需要的文件，如下图）步骤二: 引入必要的js和css样式文件 1.4 easyUI文件介绍目前的最新版本：Jquery-easyui- (1) demo-mobile 移动端案例（用的比较少）(2) Locale 国际化(3) Plugins 插件包(4) Src 源码包（对应着插件包）(5) Themes 主体，皮肤(6) changelog.txt 修改日志 (7) easyloader.js 按需加载（到哪个页面用到哪个组件，就加载哪个）(8) jquery.easyui.min.js easyUI核心功能压缩包(9) jquery.easyui.mobile.js easyUI移动端(10) jquery.min.js jquery文件(11) license_freeware.txt 许可证(12) readme.txt 1.5 创建组件的两种方式： 这是html的一个组件！ 这是js的一个组件！ $(function () $(#myDiv).panel( title: js创建, width: 500, height: 200, padding: 10); ); 注：第一点：html创建方案和js创建方案可以混着使用 第二章：常用组件2.1 LinkButtoneasyui 2.1.1 linkButton属性2.1.2 linkbutton为禁用按钮添加事件 if ($(this).hasClass(l-btn-disabled) console.log(此为禁用元素); else console.log($(this).text();2.2 panel面板 标签2.2.1 panel标签panel面板的内容 2.2.2 panel属性title=My Panel 设置标题fit=true 填充整个父容器（有用），宽高失效iconCls:icon-save, 设置左上角图标closable:true, 是否显示关闭按钮 collapsible:true, 是否显示折叠按钮。minimizable:true, 是否显示最小化按钮。 maximizable:true 是否显示最大化按钮tools 自定义按钮 2.2.3 panel方法和setTitle /panel里的 panel方法和setTitle方法 $(#mydiv).panel(setTitle, 修改标题);2.2.4 panel里的open方法，close方法，refresh方法 $(function () $(#openBtn).click(function () $(#mydiv).panel(open); ); $(#closeBtn).click(function () $(#mydiv).panel(close); ); $(#loadBtn).click(function () $(#mydiv).panel(open).panel(refresh, HtmlPage1.html); ); ); 打开面板 隐藏面板 加载远程内容 panel的内容2.3 tree创建tree的两种方式:第一种：直接html创建 class=easyui-tree第二种：定义空树，js加载数据$(#tt).tree( data: text: Item1, state: closed, children: text: Item11 , text: Item12 , text: Item2 ); ) 2.4 Menu网页中添加自己的menu： easyui-menu2.5 dialog2.5.1模态框data-options=iconCls:icon-save,resizable:true,modal:true2.5.2 属性titlestring对话框的标题文本。New Dialogcollapsibleboolean定义是否显示折叠按钮。falseminimizableboolean定义是否显示最小化按钮。falsemaximizableboolean定义是否显示最大化按钮。falseresizableboolean定义对话框是否可调整尺寸。falsetoolbararray,selector对话框的顶部工具栏，可能的值：1、数组，每个工具的选项都与链接按钮（linkbutton）一样。2、选择器，指示工具栏。 2.6 datagrid2.6.1 图示2.6.2 用法 CodeNamePrice 001name12323002name246122.6.3 分页1. 2.6.4 工具栏 data-options=toolbar:toolbar var toolbar = text: Add, iconCls: icon-add, handler: function () alert(add) , text: Cut, iconCls: icon-cut, handler: function () alert(cut) , -, text: Save, iconCls: icon-save, handler: function () alert(save) ;2.7 pagination 分页2.7.1 图示2.7.2 实现 2.8 Dialog2.8.1 展示 2.8.2 实现 OpenCloseThe dialog content. 2.9 message消息框2.2.1 消息框的位置（eg：页面中右下角，左下角，左上角，右上角，中间，顶部，底部） TopLeftTopCenterTopRightCenterLeftCenterCenterRightBottomLeftBottomCenterBottomRightfunction topLeft()$.messager.show(title:My Title,msg:The message content,showType:show,style:right:,left:0,top:document.body.scrollTop+document.documentElement.scrollTop,bottom:);function topCenter()$.messager.show(title:My Title,msg:The message content,showType:slide,style:right:,top:document.body.scrollTop+document.documentElement.scrollTop,bottom:);function topRight()$.messager.show(title:My Title,msg:The message content,showType:show,style:left:,right:0,top:document.body.scrollTop+document.documentElement.scrollTop,bottom:);function centerLeft()$.messager.show(title:My Title,msg:The message content,showType:fade,style:left:0,right:,bottom:);function center()$.messager.show(title:My Title,msg:The message content,showType:fade,style:right:,bottom:);function centerRight()$.messager.show(title:My Title,msg:The message content,showType:fade,style:left:,right:0,bottom:);function bottomLeft()$.messager.show(title:My Title,msg:The message content,showType:show,style:left:0,right:,top:,bottom:-document.body.scrollTop-document.documentElement.scrollTop);function bottomCenter()$.messager.show(title:My Title,msg:The message content,showType:slide,style:right:,top:,bottom:-document.body.scrollTop-document.documentElement.scrollTop);function bottomRight()$.messager.show(title:My Title,msg:The message content,showType:show); 2.10 Form2.10.1 form表单1. 2. 3. Name:4. 5. 6. 7. Email:8. 9. 10. .11. /form 输入框加图标2.10.2 validatebox验证 2.10.3 组合框（combobox）1. 2. aitem13. bitem24. bitem35. ditem46. eitem57. 2.10.4 组合（combo）1. 2. 3. Select a language4. 5. Java6. C#7. Ruby8. Basic9. Fortran10. 11. 12. 13. $(function()14. $(#cc).combo(15. required:true,16. editable:false17. );18. $(#sp).appendTo($(#cc).combo(panel);19. $(#sp input).click(function()20. var v = $(this).val();21. var s = $(this).next(span).text();22. $(#cc).combo(setValue, v).combo(setText, s).combo(hidePanel);23. );24. );25. 2.10.5 日期框（datebox）日期： 日期+时间： 2.10.6 数值微调器（numberspinner）1. 2.10.7 滑块（slider）1. 2.11 layout2.11.1 layout布局布局（layout）是有五个区域（北区 north、南区 south、东区 east、西区 west 和中区 center）的容器。中间的区域面板是必需的，边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也可以通过点击折叠触发器来折叠面板。布局（layout）可以嵌套，因此用户可建立复杂的布局。2.11.2 layout实现1. 2. 3. 4. 5. 6. 7. 2.10.3 组合框（combobox）8. 9. aitem110. bitem211. bitem312. ditem413. eitem514. 2.10.4 组合（combo）26. 27. 28. Select a language29. 30. Java31. C#32. Ruby33. Basic34. Fortran35. 36. 37. 38. $(function()39. $(#cc).combo(40. required:true,41. editable:false42. );43. $(#sp).appendTo($(#cc).combo(panel);44. $(#sp input).click(function()45. var v =