EasyUI+zTree实现简单的树形菜单切换
使用easyui_ztree实现简单的树形菜单切换效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--导入juery核心配置文件-->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<!--导入easyui类库-->
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<!--导入默认主题css文件-->
<link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css"/>
<!--导入图标css文件-->
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css" />
<!--导入国际化文件-->
<script src="../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<!-- 引入 ztree -->
<script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css"/> <title></title>
<script type="text/javascript">
//页面加载后执行
$(function(){ //1.进行ztree菜单设置
var setting = {
data: {
simpleData:{
enable:true //支持简单的json数据
}
}, callback: {
onClick : function(event, treeId,treeNode,clickFlag){
var content= '<div style="width:100%;height:100%;overflow:hidden;">'
+ '<iframe src="'
+ treeNode.page
+ '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';
//没有page树形菜单,不打开选项卡
if(treeNode.page!=undefined && treeNode.page!=""){
//如果选项卡已经打开,选中
if($("#mytabs").tabs('exists',treeNode.name)){
//选中选项卡
$("#mytabs").tabs('select',treeNode.name);
}else{
//如果没有打开,添加选项卡
$("#mytabs").tabs('add',{
title:treeNode.name,
content:content,
closable:true
});
}
}
}
}
}; //2.提供ztree 树形菜单结构
var zNodes = [ {id:1,pId:0,name:"父节点一"},
{id:2,pId:0,name:"父节点二"},
{id:11,pId:1,name:"子节点一"},
{id:12,pId:1,name:"子节点二"},
{id:13,pId:2,name:"腾讯",page:"http://www.qq.com/"},
{id:14,pId:2,name:"百度",page:"http://www.baidu.com/"},
{id:21,pId:11,name:"子节点"},
{id:31,pId:21,name:"子节点"} ]; //3.生成菜单
//$.fn.zTree.init($("#baseMenu"),setting,zNodes);
$.fn.zTree.init($("#baseMenu"),setting, zNodes); //对选项卡注册右键事件
$("#mytabs").tabs({
onContextMenu:function(e,title,index){
//阻止默认菜单显示
e.preventDefault(); //显示自定义右键菜单
$("#mm").menu('show',{
left : e.pageX,
top : e.pageY
});
}
}); }); </script> </head>
<body class="easyui-layout"> <div data-options="region:'north',title:'xxxx管理系统',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> <div data-options="region:'west',title:'菜单导航',split:true" style="width:200px;"> <!--折叠面板-->
<div class="easyui-accordion" data-options="fit:true">
<div data-options="title:'基础菜单'">
<!--<a href="javascript:void(0)" id="czbkLink">传智播客</a>-->
<!--通过ztree插件制作树形菜单-->
<ul id="baseMenu" class="ztree"></ul>
</div>
<div data-options="title:'系统菜单'">
</div>
</div> </div>
<div data-options="region:'center',title:'消息中心'" style="padding:5px;background:#eee;">
<!--选项卡面板-->
<div id="mytabs" class="easyui-tabs" data-options="fit:true">
<div data-options="title:'选项卡面板一',closable:true">选项卡面板一</div>
<div data-options="title:'选项卡面板二',closable:true">选项卡面板二</div>
</div> </div> <!--菜单,初始化都是隐藏的-->
<div id="mm" class="easyui-menu" style="width: 120px;">
<div>关闭当前窗口</div>
<div data-options="iconCls:'icon-cancel'">关闭其他窗口</div>
<div class="menu-sep"></div> <!--分割线-->
<div data-options="iconCls:'icon-cancel'">关闭全部窗口</div>
</div> </body> </html>
效果如下
EasyUI+zTree实现简单的树形菜单切换的更多相关文章
- zTree树形菜单交互选项卡效果实现
1. 添加自定义属性 page 2. 为 ztree 每个树形节点,添加点击事件 <!DOCTYPE html> <html> <head> <meta ch ...
- zTree树形菜单使用实例
在每个节点添加 id 和 pid, id 表示当前节点编号,pid 表示父节点编号 第一步:在页面显示菜单位置,添加 ul设置 class=”ztree” 第二步:开启简单数据格式支持 第三步:编写树 ...
- 一个基于jQuery的简单树形菜单
在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 t ...
- CSS之简单树形菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery 树形菜单
树形菜单 在 jQuery easyu中其左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 tree 需要单击分叉节点前的小三角,才 ...
- treeview树形菜单，递归
我使用的是递归是实现无限级树形菜单: using System; using System.Collections; using System.Configuration; using System. ...
- java 传入list集合 返回树形菜单，for循环遍历
public List<SysPermissionVO> getTreeMenu(List<SysPermissionVO> list,SysPermissionVO sysP ...
- 用dtree实现树形菜单 dtree使用说明
http://www.jb51.net/article/28566.htm 准备工作: 请从脚本之家http://www.jb51.net/jiaoben/31974.html下载dtree.zip文 ...
- jquery树形菜单插件treeView
Jquery的treeview很好用,如果是简单的树形菜单按照下面的源码实例模仿就可以. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...
随机推荐
- 使用jQuery ui创建模态表单
jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,可以使用它创建高度交互的 Web 应用程序. 在web页面的开发过程中,在添加元素的时候需要用到弹出窗口添加 ...
- 导入goshop2(复制自己看)
1.goshop2采用了分布式的架构,很好的使用dubbo集成了服务.导入goshop2需要注意的事项如下: 1.1基本模块的架构: goshop-common开头的为项目的通用配置 goshop-s ...
- BZOJ1566 [NOI2009]管道取珠 【dp】
题目 输入格式 第一行包含两个整数n, m,分别表示上下两个管道中球的数目. 第二行为一个AB字符串,长度为n,表示上管道中从左到右球的类型.其中A表示浅色球,B表示深色球. 第三行为一个AB字符串, ...
- 封装一个类似jquery的ajax方法
//封装一个类似jquery的ajax方法,当传入参数,就可以发送ajax请求 //参数格式如下{ // type:"get"/"post", // dataT ...
- Mongodb学习（1）--- mongoose: Schema, Model, Entity
Schema : 一种以文件形式存储的数据库模型骨架,不具备数据库的操作能力 Model : 由 Schema 发布生成的模型,具有抽象属性和行为的数据库操作 Entity : 由 Model 创建的 ...
- Reactor模式总结
Reactor是基于NIO中实现多路复用的一种模式. 什么是Reactor模式 同步的等待多个事件源到达(采用select()实现) 将事件多路分解以及分配相应的事件服务进行处理,这个分派采用serv ...
- pat 甲级 1066. Root of AVL Tree (25)
1066. Root of AVL Tree (25) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue An A ...
- 【HDOJ5555】Immortality of Frog（状压DP）
题意:给你一个NxN的网格,第N行的每一列都有个青蛙,这些青蛙只会往上走, 上帝会在每个膜中随机等概率放一个长生不老的药, 一共有N个膜,每个膜覆盖一些区间,如果这个区间恰好为N那么就是好膜,否则是坏 ...
- .NET抓取数据范例 抓取页面上所有的链接
原文发布时间为:2009-11-15 -- 来源于本人的百度文章 [由搬家工具导入] .NET抓取数据范例 抓取页面上所有的链接 前台： <%@ Page Language="C#&q ...
- Web安全-XSS-SQL注入-CSRF
一.XSS 跨站脚本攻击(Cross Site Scripting): 1.指攻击者在网页中嵌入客户端脚本(例如JavaScript), 当用户浏览此网页时,脚本就会在用户的浏览器上执行,从而达到攻击 ...