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 实现的多功能 “树插件”. ...
随机推荐
- JavaScript如何计算两个日期间的时间差
<script type="text/javascript"> /* * 获得时间差,时间格式为 年-月-日 小时:分钟:秒 或者 年/月/日 小时:分钟:秒 * 其中 ...
- PHP到底有多牛?你所知道的网站都在用它
PHP到底有多牛?你所知道的网站都在用它 提起PHP,很多人的第一印象就是网站开发,确实,在网站开发方面,PHP难逢对手,当之无愧是“世界上最好的语言”. 有数据显示,目前全球5000万互联网网站中, ...
- cocos2d-x 绘制图形
转载请注明出处:http://blog.csdn.net/oyangyufu/article/details/25841727 绘制图形例如以下: 程序代码: 须要又一次定义父类虚函数draw() ...
- LDAP概念和原理
LDAP概念和原理介绍 相信对于许多的朋友来说,可能听说过LDAP,但是实际中对LDAP的了解和具体的原理可能还比较模糊,今天就从“什么是LDAP”.“LDAP的主要产品”.“LDAP的基本模型”.“ ...
- Python打包—Pyinstaller
2018-09-27 21:12:05 一 前言 在windows平台学习python的过程中,你肯定会遇到需要把.py脚本打包成.exe的情形,如此,至少有两方面的好处:第一,你的代码保密性更好 ...
- linux普通用户提权操作
[root@test1 ~]# vim /etc/sudoers ## Allow root to run any commands anywhere root ALL=(ALL) ALLzhouyu ...
- CF980E The Number Games
CF980E The Number Games 给定一棵大小为 \(n\) 的树,第 \(i\) 个点的点权为 \(2^i\) ,删掉 \(k\) 个点及其连边,使得剩下的点组成一个连通块,且权值和最 ...
- CustomScrollView + slivers + SliverAppBar
import 'package:flutter/material.dart'; void main()=>runApp(MyApp()); class MyApp extends Statele ...
- ESP8266开发综合篇第一节(LUA)-下载和刷固件
本节视频: https://v.youku.com/v_show/id_XNDAwMTI2OTg2MA==.html?spm=a2h3j.8428770.3416059.1 一,整版测试 刷入测试固 ...
- 面试笔记--Fast-Fail(快速失败)机制
1.解决: fail-fast机制,是一种错误检测机制.它只能被用来检测错误,因为JDK并不保证fail-fast机制一定会发生.若在多线程环境下使用fail-fast机制的集合,建议使用“java. ...