Jquery easyui 1.3.2
easyui 主要组件
1、 Form 表单组件
2、 Grid 表格组件 table
3、 Layout 布局组件
4、 Menu and Button 菜单和按钮
5、 Window 窗体
6、 Tree 树形结构
使用easyUI步骤
解压jquery-easyui-1.3.2.zip后将下列文件复制到项目中
第一步 ： 导入 jQuery、easyUI、所需css
第二步 ： 使用easyui 完成layout布局
Layout 页面布局 将页面分成五个部分 è 东西南北中 (中不能省略)
<body class="easyui-layout ">
<divdata-options="region :'north', title :'北 ', split :true" style ="height:100px;"></div>
布局过程中只有center区域是必须的，其它区域都可以省略
第三步 ： 在west区域中加入可折叠菜单
Accordion 可折叠菜单
<div data-options=”west”>
<div fit =”true” class=” easyui-accordion ”>（需要再套一个div）
<divtitle="第一部分" style="overflow:auto; padding:0;">内容一</div>
<div title="第二部分" data-options="iconCls:'icon-save' ">内容二</div>
</div>
</div>
第四步：应用ztree插件完成可折叠菜单中的树形结构
ztree为jQuery 第三方的树形结构插件
使用简单 json数据制作
1） 引入 zTree js文件和css文件
2） 使用ztree
目标div 显示树结构，给定id用于获得div节点对象
<div id="mytree" class="ztree">
Setting 配置信息
var setting = {
data : {
key : {
title : "t"
},
simpleData : {
enable : true
}
},
callback : {
onClick : onClick
}
Json 数据
[{ id:11, pId:0, name:"基础档案", click:false },
{id:111, pId:11, name:"基础档案设置", t:"基础档案设置", page: "page_base_jichuda ngan.action"},
{id:112, pId:11, name:"收派标准" ,page:""},
{id:113, pId:11, name:"取派员设置" ,page:""}]
注：id就是元素id属性，pid是节点的父节点的id 属性， name 显示的内容，open节点是否可 以展开（如果是可以展开的必须是父节点），pId为0就说明该节点是根节点，没有任何父节点
为目标div应用树数据
$.fn.zTree.init ($("#mytree"), setting, zNodes);
3）为树上每个节点注册一个onclick函数，函数有四个参数
onClick(event,treeId, treeNode , clickFlag)
在onclick函数中判断 if(treeNode.click!=false){触发叶子节点点击效果}
第五步 ： 点击左侧树，在右侧添加一个tab页面
使用 easyUI的布局（layout）的tabs
<divclass="easyui-tabs " style="height:200px;" id="mytabs">
<div title="标题一">tab1</div>
<div title="标题二">tab2</div>
</div>
点击树形结构后添加新的tab
$("#mytabs").tabs('add',{
title: '新tab的标题',
content: 'tab的内容'
});
easyUI下拉菜单的使用
<!-- 横向菜单布局 -->
<div style="position: absolute; right: 5px;bottom: 10px; ">
<a href="javascript:void(0);" class="easyui-menubutton"
data-options="menu:'#layout_north_pfMenu',iconCls:'icon-ok'">更换皮肤</a>
<ahref="javascript:void(0);" class="easyui-menubutton"
data-options="menu:'#layout_north_kzmbMenu',iconCls:'icon-help'">控制面板</a>
</div>
<!-- 第一个按钮的下拉菜单 -->
<div id ="layout_north_pfMenu"style="width: 120px; display: none;">
<div onclick ="changeTheme('default');">default</div>
<divοnclick="changeTheme('gray');">gray</div>
<divοnclick="changeTheme('black');">black</div>
<divοnclick="changeTheme('bootstrap');">bootstrap</div>
<divοnclick="changeTheme('metro');">metro</div>
</div>
<!-- 第二个按钮的下拉菜单 -->
<div id="layout_north_kzmbMenu" style="width:100px; display: none;">
<divοnclick="editPassword();">修改密码</div>
<divοnclick="showAbout();">联系管理员</div>
<divclass="menu-sep"></div>
<divοnclick="logoutFun();">退出系统</div>
</div>
扫一扫
6970
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
