当前位置:文档之家› easyUI学习笔记

easyUI学习笔记

easyUI学习笔记
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 , 选项卡可以被关闭

选项卡一

选项卡二

选项卡三

ztree

主页菜单栏树形菜单生成

树形结构菜单,通常使用js 类库制作的

bos 菜单树,使用ztree 制作的

1、zTree 是一个依靠jQuery 实现的多功能“树插件”。优异的性能、灵活的配置、多种功能的组合是zTree 最大优点。

开发使用ztree 3.5 (jquery 插件)

api 文档

css 样式表

demo 案例

js 核心类库

今天目标:简单树两种方式(标准数据和简单数据)

导入jquery.ztree.all-3.5.js 、zTreeStyle.css (依赖img 图标文件夹)

type="text/css" href="${pageContext.request.contextPath}/js/ztree/zTreeStyle.css">

2、在accordion折叠菜单中,编写树形菜单

StandardData 标准树

SimpleData 简单树

第一种:标准数据

第一步:在页面生成树地方,提供

相关文档 最新文档