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 实现的多功能 “树插件”. ...
随机推荐
- jvisualVM的使用
jvisualvm能干什么:监控内存泄露,跟踪垃圾回收,执行时内存.cpu分析,线程分析... jvisualvm已经被集成在jdk1.6以上的版本中(不是jre).自身运行需要最低jdk1.6版本, ...
- JSX格式化代码，你值得拥有！
ext install prettier-vscode https://segmentfault.com/q/1010000014822745
- Java面试知识点之线程篇（二）
前言:接上篇,这里继续对java线程相关知识点进行总结. 1.notify和notifyall的区别 notify()方法能够唤醒一个正在等待该对象的monitor的线程,当有多个线程都在等待该对象的 ...
- iptables 端口转发规则
玩 vps 的经常要用到端口转发用以实现更快的速度.比如 ovh 机房的网络我这里访问非常慢,用远程桌面会吐血的类型.所以就会用其他的线路作为跳板,比如洛杉矶,香港之类的.再比如如果需要一个日本 ip ...
- 前端框架Vue.js——vue-i18n ，vue项目中如何实现国际化
本项目利用 VueI18n 组件进行国际化,使用之前,需要进行安装 $ npm install vue-i18n 一.框架引入步骤: 1. 先在 main.js 中引入 vue-i18n. // 国 ...
- web3js learning
使用console.log(web3.version.api);来查看了web3的版本是0.20.1, 参考文档在:https://github.com/ethereum/wiki/wiki/Java ...
- Pycharm 自定义快捷键
之前使用 Eclipse 时,快捷键 Ctrl + M 会使当前窗口最大化.这里配置 PyCharm 具有相同功能. 1)打开 File > Settings > Keymap 2 ...
- vue-cli sass安装
一.安装对应依赖node模块: npm install node-sass --save-dev npm install sass-loader --save-dev 二.打开webpack.base ...
- 《maven in action》部分知识点总结
maven in action 的部分知识点总结 今天又将<maven in action>这本书看了一遍,总结了一下,大概需要的知识点 (一)解耦 使用maven,在没有任何实际的J ...
- docker部署nginx
1. 下载nginx [root@localhost my.Shells]# docker images REPOSITORY TAG IMAGE ID CREATED SIZE docker.io/ ...