使用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. Halcon11 Windows版 下载

    Halcon11 下载地址:http://www.211xun.com/download_page_2.html HALCON 11 是一套机器视觉图像处理库,由一千多个算子以及底层的数据管理核心构成 ...

  2. nmon系统监控

    nmon系统监控篇 本文目录 1 nmon的安装 2 nmon控制台指令 3 输出监控文件 一 下载nmon 本次使用的是nmon_linux_14i.tar.gz 二 放入linux中后解压 gzi ...

  3. redis 集群分配哈希曹

    重新分配哈希曹: ip:port 为当前redis集群任意节点ip和port redis-cli --cluster reshard ip:port 操作如图: 分配哈希槽有两种方式: 1.在其他节点 ...

  4. Web进程被kill掉后线程还在运行怎么办？

    目录 背景描述 原因分析 处理方案 参考 背景描述 系统有一个配置表,系统在启动后会启动一个线程,每隔5分钟将配置表里所有的数据更新到内存中. 系统是通过jenkins构建(直接kill掉Web进程, ...

  5. Java中转发与重定向的区别

        转发与重定向的区别 转发是服务器行为,重定向是客户端行为 1.转发在服务器端完成的:重定向是在客户端完成的2.转发的速度快:重定向速度慢3.转发的是同一次请求:重定向是两次不同请求4.转发不会 ...

  6. 使用BootStrap网格布局进行一次演示

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 【bzoj1146】[CTSC2008]网络管理Network 倍增LCA+dfs序+树状数组+主席树

    题目描述 M公司是一个非常庞大的跨国公司,在许多国家都设有它的下属分支机构或部门.为了让分布在世界各地的N个部门之间协同工作,公司搭建了一个连接整个公司的通信网络.该网络的结构由N个路由器和N-1条高 ...

  8. hdu 3874 树状数组

    思路:和求区间内有多少个不同的数一样,只不过改下权值. #include<iostream> #include<cstdio> #include<algorithm> ...

  9. 如何在MySQL中导入大容量SQL文件

    在实际工作中,有时需要导入大容量sql文件到MySQL,通常有以下三种方法: (1)通过phpmyadmin,不推荐,有内存等的限制: (2)通过Navicat Premium工具运行sql,不推荐, ...

  10. FusionCharts参数说明补充

    原文发布时间为:2010-09-14 -- 来源于本人的百度文章 [由搬家工具导入] 功能特性animation                    是否动画显示数据，默认为1(True)showN ...