easyui入门

1.1.  easyui的目录分析

课程以 jquery Easy UI 1.3.2 版本学习

（从1.2.3版本 开始收费 ）

 

demo 实例

locale 国际化信息

plugins 框架一些插件

src 源码

themes 样式文件

easyloader.js  框架核心加载器 （加载其它plugin）

jquery-1.8.0.min.js  jQuery类库

jquery.easyui.min.js  框架类库 （等价于easyloader.js + plugins 所有插件 ）

 

1.2.  在项目中引入 EasyUI

必须引入

 

 

<!--先引入 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.3.  easyui的layout 控件使用

布局控件对一个div使用，也可以对 整个页面body元素使用

 

 

1.4.  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>

 

 

1.5.  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>