页面布局技术easyui&zTree

前端之家收集整理的这篇文章主要介绍了页面布局技术easyui&zTree前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

页面布局技术@H_301_2@easyui

1、整体网页布局,企业应用软件主流布局,占满整个页面,点击左侧菜单,通过iframe完成局部刷新

2@H_301_2@easyui

jQueryEasyUI是一组基于@H_301_2@jQuery@H_301_2@UI插件集合,

而@H_301_2@jQueryEasyUI的目标就是帮助@H_301_2@web开发者更轻松的打造出功能丰富并且美观的@H_301_2@UI界面。开发者不需要编写复杂的@H_301_2@javascript,也不需要对@H_301_2@css样式有深入的了解,开发者需要了解的只有一些简单的@H_301_2@html标签

***很多企业@H_301_2@java工程师,不懂@H_301_2@CSS和界面美化,仍然想开发漂亮界面,使用成型@H_301_2@js框架(@H_301_2@UI框架)

extjs非常漂亮@H_301_2@UI控件

flex基于@H_301_2@flash,漂亮@H_301_2@UI控件

jqueryeasyui:效果仿造@H_301_2@ExtJs、学习成本极低

3、下载@H_301_2@easyui

最新版本@H_301_2@1.3.3

从@H_301_2@1.2.3版本开始收费参考@H_301_2@jquery.EasyUI-1.3.1+API.chm进行@H_301_2@easyui学习

常见控件

1@H_301_2@layout控件

****页面中导入@H_301_2@easyui

导入@H_301_2@jquery@H_301_2@js@H_301_2@jquery-1.8.0.min.js

导入@H_301_2@easyui@H_301_2@js@H_301_2@jquery.easyui.min.js==easyloader.js(核心加载器)@H_301_2@+plugins/*.js

导入@H_301_2@css@H_301_2@themes/default/easyui.css(默认样式核心@H_301_2@css

代码


layout控件制作整个页面布局,将页面分成东西南北中五个部分,只有@H_301_2@center区域时必须存在的

*可以对某个@H_301_2@div进行布局,可以对整合@H_301_2@body标签进行布局

在@H_301_2@<body>添加@H_301_2@class="easyui-layout"

*五个区域中只有@H_301_2@center区域是必须的,如果不指定@H_301_2@title没有标题


2)west区域,使用可折叠面板@H_301_2@accordion

如果使用图标效果,引入@H_301_2@icon.css

@H_301_2@

重点:<divtitle="Title1">也可以写为<divdata-options="title:'Title1'">

例如:

<divtitle="Title1"data-options="iconCls:'icon-ok'">面板一内容@H_301_2@</div>

<divdata-options="title:'Title2'"iconCls="icon-ok">面板二内容@H_301_2@</div>

*accordion可折叠面板,继承@H_301_2@panel面板,也继承@H_301_2@panel面板所有属性方法

3)ztree树形菜单

zTree是一个依靠@H_301_2@jQuery实现的多功能“树插件”。优异的性能、灵活的配置、多种功能的组合是@H_301_2@zTree最大优点。专门适合项目开发,尤其是树状菜单、树状数据的@H_301_2@Web显示、权限管理等等。

下载@H_301_2@ztree3.5.x

参考:@H_301_2@api文档,@H_301_2@demo

使用@H_301_2@ztree

导入@H_301_2@jquery

导入@H_301_2@jquery.ztree.all-3.5.js

导入@H_301_2@zTreeStyle.css

***保证@H_301_2@zTreeStyle.css@H_301_2@img文件夹在一起就可以了

代码

参考@H_301_2@standardData.html编写简单树

步骤一@H_301_2@:settings

varsettings={};

步骤二:@H_301_2@zNodes树形节点数据

varzNodes=[//默认展开节点,@H_301_2@open=true

{name:"父节点@H_301_2@1",children:[

{name:"子节点@H_301_2@11"},{name:"子节点@H_301_2@12"}

]},

{name:"父节点@H_301_2@2",children:[

{name:"子节点@H_301_2@21"},{name:"子节点@H_301_2@22"}

]}

];

步骤三:初始化树

$(function(){

$.fn.zTree.init($("#treeDemo"),settings,zNodes);

});

<ulid="treeDemo"class="ztree"></ul>

参照@H_301_2@simpleData.html编写简单树

4)tab菜单显示@H_301_2@---选项卡菜单

选项卡关闭,使用@H_301_2@closable:true

<divtitle="选项卡三@H_301_2@"closable="true">选项卡内容@H_301_2@</div>

添加选项卡添加代码

猜你在找的Ajax相关文章