使用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实现简单的树形菜单切换的更多相关文章

  1. zTree树形菜单交互选项卡效果实现

    1. 添加自定义属性 page 2. 为 ztree 每个树形节点,添加点击事件 <!DOCTYPE html> <html> <head> <meta ch ...

  2. zTree树形菜单使用实例

    在每个节点添加 id 和 pid, id 表示当前节点编号,pid 表示父节点编号 第一步:在页面显示菜单位置,添加 ul设置 class=”ztree” 第二步:开启简单数据格式支持 第三步:编写树 ...

  3. 一个基于jQuery的简单树形菜单

    在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 t ...

  4. CSS之简单树形菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jQuery 树形菜单

    树形菜单 在 jQuery easyu中其左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 tree 需要单击分叉节点前的小三角,才 ...

  6. treeview树形菜单，递归

    我使用的是递归是实现无限级树形菜单: using System; using System.Collections; using System.Configuration; using System. ...

  7. java 传入list集合 返回树形菜单，for循环遍历

    public List<SysPermissionVO> getTreeMenu(List<SysPermissionVO> list,SysPermissionVO sysP ...

  8. 用dtree实现树形菜单 dtree使用说明

    http://www.jb51.net/article/28566.htm 准备工作: 请从脚本之家http://www.jb51.net/jiaoben/31974.html下载dtree.zip文 ...

  9. jquery树形菜单插件treeView

    Jquery的treeview很好用,如果是简单的树形菜单按照下面的源码实例模仿就可以. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...

随机推荐

  1. PostgreSQL 数组类型

    PostgreSQL 支持表的字段使用定长或可变长度的一维或多维数组,数组的类型可以是任何数据库内建的类型.用户自定义的类型.枚举类型, 以及组合类型.但目前还不支持 domain 类型. 数组类型的 ...

  2. Halcon17 Linux 下载

    Halcon17 Linux 下载地址:http://www.211xun.com/download_page_10.html HALCON 17 是一套机器视觉图像处理库,由一千多个算子以及底层的数 ...

  3. sed处理大txt文件(1G) 比如替换某一串字符串，或者删除一行

    1.将11.sql文件中"prompt"替换为"--prompt",然后保存为111.sql文件 sed -e "s,prompt,--prompt, ...

  4. JavaScript: 理解对象

    ECMA-262 把对象定义为:“无序属性的集合,其属性可以包含基本值.对象或者函数.” 严格来讲,这就相当于说对象是一组没有特定顺序的值.对象的每个属性或者方法都有一个名字,而每个名字都映射到一个值 ...

  5. python基础-集合小结

    Python-基础-集合小结 集合 简介 声明 常用操作 成员关系 新增删除 集合间操作 其他 补充 集合 简介 python的set和其他语言类似, 是一个无序不重复元素集, 基本功能包括关系测试和 ...

  6. 一、vue的数据双向绑定的实现

    响应式系统 一.概述 Vue通过设定对象属性的 setter/getter 方法来监听数据的变化,通过getter进行依赖收集,而每个setter方法就是一个观察者,在数据变更的时候通知订阅者更新视图 ...

  7. 习题：最短路计数（SPFA最短路计数）

    最短路计数(洛谷1144)题目描述 给出一个N个顶点M条边的无向无权图,顶点编号为1-N.问从顶点1开始,到其他每个点的最短路有几条.输入输出格式输入格式:输入第一行包含2个正整数N,M,为图的顶点数 ...

  8. WF 18 A 想法

    UPD:我理解错题意了. 考虑在时刻 $t$ 从站点 $u$ 出发的公交车,将这些车的集合记做 $B(u,t)$,$B(u,t)$ 是个随机变量. 令 $\mathrm{Pr}_{B(u,t)} = ...

  9. 如何通过IP地址分辨公网、私网、内网、外网

    如何通过IP地址分辨公网.私网.内网.外网   内.外网是相对于防火墙而言的,在防火墙内部叫做内网,反之就是外网.   在一定程度上外网等同于公网,内网等同于私网.   地址为如下3个区域就是处于私网 ...

  10. python2.7运行出现的Warning: UnicodeWarning: Unicode equal comparison failed to convert both arguments to Unicode - interpreting them as being unequal

    运行出现如下错误 uncode编码警告:在unicode等价比较中,把两个参数同时转换为unicode编码失败.中断并认为他们不相等. windows下的字符串str默认编码是ascii,而pytho ...