zTree树形菜单交互选项卡效果实现
1、 添加自定义属性 page
2、 为 ztree 每个树形节点,添加点击事件
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>ztree树形菜单的使用</title>
<!-- 导入jquery核心类库 -->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../css/default.css">
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></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" /> <script type="text/javascript">
//页面加载后执行
$(function() {
//1.进行ztree树形菜单设置,开启简单json数据支持
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:"CSDN博客",page:"http://blog.csdn.net/a772304419"},
{id:14,pId:2,name:"博客园",page:"http://www.cnblogs.com/niwotaxuexiba/"}
]; //3.生成树形菜单
$.fn.zTree.init($("#baseMenu"),setting,zNodes);
});
</script>
</head> <body class="easyui-layout">
<div data-options="region:'north',title:'你我他学习吧-学习Java的好博客!'" style="height:100px"></div>
<div data-options="region:'west',title:'菜单导航'" style="width:200px">
<!--折叠面板-->
<div class="easyui-accordion" data-options="fit:true">
<div data-options="title:'基础菜单'">
<!--通过ztree插件,制作树形菜单-->
<ul id="baseMenu" class="ztree"></ul>
</div>
<div data-options="title:'系统菜单'">你我他学习吧</div>
</div>
</div>
<div data-options="region:'center',title:'中部区域'">
<!--选项卡面板-->
<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 data-options="region:'east',title:'东部区域'" style="width:100px"></div>
<div data-options="region:'south',title:'南部区域'" style="height:100px"></div>
</body> </html>
zTree树形菜单交互选项卡效果实现的更多相关文章
- zTree树形菜单使用实例
在每个节点添加 id 和 pid, id 表示当前节点编号,pid 表示父节点编号 第一步:在页面显示菜单位置,添加 ul设置 class=”ztree” 第二步:开启简单数据格式支持 第三步:编写树 ...
- ztree树形菜单的增加删除修改和换图标
首先需要注意一点,如果有研究过树形菜单,就会发现实现删除和修改功能特别简单,但是增加却有一点复杂.造成这个现象是ztree树形菜单的历史遗留问题.大概是之前的版本没有增加这个功能,后来的版本加上了这个 ...
- Bootstrap风格zTree树形菜单插件
这是一款bootstrap风格jQuery zTree树形菜单插件,支持自定义编辑.添加列表菜单.删除列表等功能的jQuery树形菜单代码.在线演示 具体代码实现: <!DOCTYPE html ...
- ztree树形菜单demo
阅读目录 zTree树形菜单 回到顶部 zTree树形菜单 树形菜单使用方式如下:HTML引入的方式如下: <!DOCTYPE html> <html> <head> ...
- 默认展开ztree树形菜单
var setting = { view: { selectedMulti: false //按住ctrl是否可以多选 }, check: { enable: true , chkStyle: 'ch ...
- thinkphp5 ztree树形菜单
教程:http://makaidong.com/zjfjava/4074_5873678.html 下载:https://github.com/zTree/zTree_v3
- EasyUI+zTree实现简单的树形菜单切换
使用easyui_ztree实现简单的树形菜单切换效果 <!DOCTYPE html> <html> <head> <meta charset="U ...
- react ant design TreeNode——树形菜单笔记
2017-12-04补充说明——树形菜单版本号2.x 设置默认该树形组件展开(默认展开所有树节点) 参考文档的写法: defaultExpandAll={true} //经过测试并不生效, 另外注意 ...
- 使用zTree插件构建树形菜单
zTree下载:https://github.com/zTree/zTree_v3 目录: 就我看来,zTree较为实用的有以下几点: zTree 是一个依靠 jQuery 实现的多功能 “树插件”. ...
随机推荐
- nginx基本配置与参数说明
user nobody; #启动进程,通常设置成和cpu的数量相等 worker_processes 1; #全局错误日志及PID文件 #error_log logs/error.log; # ...
- 在Linux上编译Hadoop-2.4.0实践与总结
问题导读: 1.编译源码前需要安装哪些软件? 2.安装之后该如何设置环境变量? 3.为什么不要使用JDK1.8? 4.mvn package -Pdist -DskipTests -Dtar的作用是什 ...
- Angular 开发小妙招1:提交表单数据验证不通过,更改输入组件的样式
开发表单时,客户端数据完整性校验是必不可少的,在jquery 时代出现了无数的数据验证插件也很好用,开发Angular 应用时,angular 内置了一些常用的数据验证指令.今天要讲的不是这些指令如何 ...
- 【vue】vue +element 搭建项目,点击空白处关闭弹窗
<template> <div class="step2"> <el-button @click="togglePanel($event)& ...
- python3 生成器和生成器表达式
''' 生成器:函数中有yield就是生成器函数 生成器本质是一个迭代器 yield后面的值会作为返回值返回. ''' def func(): print("apple") pri ...
- buildroot使用介绍
buildroot是Linux平台上一个构建嵌入式Linux系统的框架.整个Buildroot是由Makefile脚本和Kconfig配置文件构成的.你可以和编译Linux内核一样,通过buildro ...
- python logging详解及自动添加上下文信息
之前写过一篇文章日志的艺术(The art of logging),提到了输出日志的时候记录上下文信息的重要性,我认为上下文信息包括: when:log事件发生的时间 where:log事件发生在哪个 ...
- span<T>之高性能字符串操作实测
.net中的字符串操作性能问题由来已久,幸运的是微软推出了span<T>高性能指针操作封装工具类.这个类到底有多高的性能呢?网上传言反正很高,但是实际上在网上很难找到合适的测试实例,这让本 ...
- SpringBoot开发案例之整合Dubbo分布式服务
前言 在 SpringBoot 很火热的时候,阿里巴巴的分布式框架 Dubbo 不知是处于什么考虑,在停更N年之后终于进行维护了.在之前的微服务中,使用的是当当维护的版本 Dubbox,整合方式也是使 ...
- 10分钟开发 GPS 应用,了解一下
1 前言 在导师公司实习了半个月,参加的是尾气遥测项目,我的任务是开发GPS 的相关事情,从零到有的开发出了 GPS 的 Winform 应用,在这里记录一下开发过程和简要的描述一下将 GPS 数据提 ...