页面布局技术easyui&zTree
|
页面布局技术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） 代码：
layout控件制作整个页面布局，将页面分成东西南北中五个部分，只有center区域时必须存在的 *可以对某个div进行布局，可以对整合body标签进行布局 在<body>添加class="easyui-layout" *五个区域中只有center区域是必须的，如果不指定title没有标题栏
2)west区域，使用可折叠面板accordion 如果使用图标效果，引入icon.css
重点：<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编写简单树 4)tab菜单显示---选项卡菜单 选项卡关闭，使用closable:true <divtitle="选项卡三"closable="true">选项卡内容三</div> 添加选项卡添加代码 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |