easyUI学习笔记

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 中文api

jquery.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 ？

引入四个文件

href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">

href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">

2、学习使用easy ui 布局功能

layout 布局控件使用

将body、div 分成东西南北中，五个部分

北部

南部

西部

东部

中部

注意，只有center区域的必须的

3、可折叠菜单accordion 布局

aa

bb

通过iconCls:'icon-help' 指定图标（必须引入icon.css文件）

4、选项卡布局tabs 布局

closable为true , 选项卡可以被关闭

选项卡一

选项卡二

选项卡三