页面布局技术easyui
1、整体网页布局，企业应用软件主流布局，占满整个页面，点击左侧菜单，通过iframe完成局部刷新
2、easyui
jQueryEasyUI是一组基于jQuery的UI插件集合，
而jQueryEasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。
***很多企业java工程师，不懂CSS和界面美化，仍然想开发漂亮界面，使用成型js框架（UI框架）
extjs非常漂亮UI控件
flex基于flash，漂亮UI控件
jqueryeasyui:效果仿造ExtJs、学习成本极低
3、下载easyui
最新版本1.3.3
从1.2.3版本开始收费参考jquery.EasyUI-1.3.1+API.chm进行easyui学习
常见控件
1）layout控件
****在页面中导入easyui
导入jquery的js：jquery-1.8.0.min.js
导入easyui的js：jquery.easyui.min.js==easyloader.js（核心加载器）+plugins/*.js
导入css：themes/default/easyui.css（默认样式核心css）
@H_404_186@
layout控件制作整个页面布局，将页面分成东西南北中五个部分，只有center区域时必须存在的
*可以对某个div进行布局，可以对整合body标签进行布局
在<body>添加class="easyui-layout"
*五个区域中只有center区域是必须的，如果不指定title没有标题栏 @H_404_186@
@H_404_186@
2)west区域，使用可折叠面板accordion
如果使用图标效果，引入icon.css
@H_404_186@
重点：<divtitle="Title1">也可以写为<divdata-options="title:'Title1'">
例如：
<divtitle="Title1"data-options="iconCls:'icon-ok'">面板一内容</div>
<divdata-options="title:'Title2'"iconCls="icon-ok">面板二内容</div>
*accordion可折叠面板，继承panel面板，也继承panel面板所有属性和方法
3)ztree树形菜单
zTree是一个依靠jQuery实现的多功能“树插件”。优异的性能、灵活的配置、多种功能的组合是zTree最大优点。专门适合项目开发，尤其是树状菜单、树状数据的Web显示、权限管理等等。
下载ztree3.5.x
参考：api文档，demo
使用ztree
导入jquery
导入jquery.ztree.all-3.5.js
导入zTreeStyle.css
***保证zTreeStyle.css和img文件夹在一起就可以了
代码：
参考standardData.html编写简单树
步骤一:settings
varsettings={};
步骤二：zNodes树形节点数据
varzNodes=[//默认展开节点，open=true
{name:"父节点1",children:[
{name:"子节点11"},{name:"子节点12"}
]},
{name:"父节点2",children:[
{name:"子节点21"},{name:"子节点22"}
]}
];
步骤三：初始化树
$(function(){
$.fn.zTree.init($("#treeDemo"),settings,zNodes);
});
<ulid="treeDemo"class="ztree"></ul>
参照simpleData.html编写简单树
选项卡关闭，使用closable:true
<divtitle="选项卡三"closable="true">选项卡内容三</div>
