教你快速突击掌握EasyUI

教你快速突击掌握EasyUI

一、基础

1、简介
UI界面，快速建立与人交互的优美界面

2、easyui的目录分析
demo 实例
locale 国际化信息
plugins 框架一些插件
src 源码
themes 样式文件
easyloader.js 框架核心加载器 （加载其它plugin）
jquery-1.8.0.min.js jQuery类库
jquery.easyui.min.js 框架类库 （等价于 easyloader.js + plugins 所有插件 ）

3、在项目中引入 EasyUI
（1）locale / themes / juery-1.8.0.min.jar / juery.easyui.min.js
（2）引入代码

<!-- 先引入 jquery的 js -->
<script type="text/javascript" 
	src="${pageContext.request.contextPath }/js/jquery-1.8.3.js">
</script>
<!-- 引入 easyui的js -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
<!-- 引入国际化 js -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入 默认样式 css -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css"/>
<!-- 引入 icon图标 css  -->
<link rel="stylesheet" 
type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css"/>

二、知识升级

1、easyui 的layout 控件使用
（1）布局控件 对一个div使用，也可以对 整个页面 body元素使用
（2）只有center区域是必须的，在标签data-options配置属性

2、easyui 的accordion 折叠面板使用
设置fit属性，让面板占满父容器

<!-- 折叠面板  -->
		<!-- fit属性，使当前div大小占满父容器  -->
		<div class="easyui-accordion" data-options="fit:true">
			<!-- 通过iconCls 设置图标，找 icon.css中 类定义 -->
			<div data-options="title:'基本功能',iconCls:'icon-mini-add'">基本功能面板</div> <!-- 这里每个div就是一个面板 -->
			<div data-options="title:'高级功能'">高级功能面板</div>
			<div data-options="title:'管理员功能'">管理员功能面板</div>
		</div>

3、easyui 的 tabs 选项卡面板使用

<div data-options="region:'center'">
		<!-- 选项卡面板 -->
		<div class="easyui-tabs" data-options="fit:true">
			<div data-options="title:'选项卡一'">内容一</div> <!-- 这里每个div 就是一个选项卡 -->
			<!-- closeable 可关闭 -->
			<div data-options="title:'选项卡二',closable:true">内容二</div>
			<div data-options="title:'选项卡三'">内容三</div>
		</div>
	</div>

三、树形菜单

1、树形菜单的制作
（1）使用 ztree插件，制作树形菜单
（2）zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点
（3）ztree目录：api文档、css样式、demo案例、js核心类库文件

2、引入
在页面引入 ztree

<!-- 引入ztree  -->
<script type="text/javascript" src="${pageContext.request.contextPath }
/js/ztree/jquery.ztree.all-3.5.js"></script>
<link rel="stylesheet" type="text/css" 
href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css"/>