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