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 分成东西南北中，五个部分 body class=easyui-layout!-- 布局，将body分为 东西南北中 五个部分 --div region=north style=height: 100px title=北部面板北部/divdiv data-options=region:south,title:南部面板 style=height: 100px南部/divdiv data-options=region:west,title:西部面板 style=width: 100px西部/divdiv data-options=region:east,title:东部面板 style=width: 100px东部/divdiv data-options=region:center,title:中部面板中部/div/body注意，只有center区域的必须的 3、 可折叠菜单 accordion 布局!-- 使用可折叠菜单 --!-- 如果子div占满父容器 fit=true --div class=easyui-accordion data-options=fit:true!-- 折叠菜单 都要提供 title --div data-options=title:基本菜单aa/divdiv data-options=title:系统菜单bb/div/div通过 iconCls:icon-help 指定图标 （必须引入 icon.css文件 ）4、 选项卡布局 tabs 布局closable为true , 选项卡可以被关闭 !-- 使用选项卡布局 --!-- 每个选项卡 必须提供 title --div class=easyui-tabs data-options=fit:truediv data-options=title:选项卡一选项卡一/divdiv data-options=title:选项卡二,closable:true选项卡二/divdiv