(easyUI学习笔记.docxVIP

esayUI前端开发：企业中java工程师，大多不擅于HTML+CSS 网页布局设计，门户网站（由前端工程师设计），企业内部应用软件（java工程师，选择前端UI框架 ExtJS 、Flex 、 Easy UI ） Easy UI 学习成本非常低easyui 必威体育精装版版本1.3.4， bos开发使用 1.3.2版本ExtJS 2.x 免费， 3.x 开始收费Easy ui 1.2.3版本开始收费问题：为什么你不用ExtJS ? easy ui 学习成本低，很容易在项目中集成使用，ExtJS 学习成本高昂EasyUI+tutorial.CHM官方demo例子jQuery_EasyUI.doc demo例子EasyUI-API+1.3.2.chm中文apijquery.EasyUI-1.3.1+API.chm英文api jquery-easyui-1.3.2.zip框架开发包目录结构分析demo 示例locale 国际化信息文件（默认英文提示信息）plugins 框架功能js文件src 源码themes 主题样式自带5套主题， icons 图标文件easyloader.js核心加载器（加载plugins 功能js）jquery-1.8.0.min.js jquery开发js文件jquery.easyui.min.js easy ui 框架功能js合集jquery.easyui.min.js == easyloader.js + plugins/* 1.如何在页面中使用 easy ui ？引入四个文件!-- 引入easy ui --link rel=stylesheet type=text/css href=${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css link rel=stylesheet type=text/css href=${pageContext.request.contextPath}/js/easyui/themes/icon.css script type=text/javascript src=${pageContext.request.contextPath}/js/easyui/jquery-1.8.3.js/scriptscript type=text/javascript src=${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js/script2、学习使用easy ui 布局功能layout 布局控件使用将 body、div 分成东西南北中，五个部分bodyclass=easyui-layout!-- 布局，将body分为东西南北中五个部分 --divregion=northstyle=height: 100px title=北部面板北部/divdivdata-options=region:south,title:南部面板style=height: 100px南部/divdivdata-options=region:west,title:西部面板style=width: 100px西部/divdivdata-options=region:east,title:东部面板style=width: 100px东部/divdivdata-options=region:center,title:中部面板中部/div/body注意，只有center区域的必须的3、可折叠菜单 accordion 布局!-- 使用可折叠菜单 --!-- 如果子div占满父容器 fit=true --divclass=easyui-accordiondata-options=fit:true!-- 折叠菜单都要提供 title --divdata-options=title:基本菜单aa/divdivdata-options=title:系统菜单bb/div/div通过iconCls:icon-help指定图标（必须引入 icon.css文件）4、选项卡布局 tabs 布局closable为true , 选项卡可以被关闭!-- 使用选项卡布局 --!-- 每个选项卡必须提供 title --divclass=easyui-tabsdata-options=fit:truedivdata-options=title:选项卡一选项卡一/divdivdata-options=title:选项卡二,closable:true选项卡二/divdivdata-options=title:选项卡三选项卡三/div/divztree主页菜单栏树形菜单生成树形结构菜