zTree树形菜单交互选项卡效果的实现方法


Posted in Javascript onDecember 25, 2017

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" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="../css/default.css" rel="external nofollow" >
 <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" rel="external nofollow" />

 <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树形菜单交互选项卡效果的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 强制刷新页面的实现代码
Dec 13 Javascript
JavaScript之引用类型介绍
Aug 10 Javascript
Javascript 函数parseInt()转换时出现bug问题
May 20 Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
JS非空验证及邮箱验证的实例
Aug 11 Javascript
微信小程序实现简单跑马灯效果
May 26 Javascript
解决Vue动态加载本地图片问题
Oct 09 Javascript
详解JavaScript中精度失准问题及解决方法
Feb 04 Javascript
javascript实现简单留言板案例
Feb 09 Javascript
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 #jQuery
Vue.js递归组件构建树形菜单
Dec 24 #Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 #Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 #Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 #jQuery
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 #Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 #Javascript
You might like
PHP函数utf8转gb2312编码
2006/12/21 PHP
php图片上传类 附调用方法
2016/05/15 PHP
PHP实现统计在线人数功能示例
2016/10/15 PHP
PHP进程通信基础之信号
2017/02/19 PHP
关于query Javascript CSS Selector engine
2013/04/12 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
vue router demo详解
2017/10/13 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
vue中使用props传值的方法
2019/05/08 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
python实现的简单猜数字游戏
2015/04/04 Python
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
python实现可变变量名方法详解
2019/07/01 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
python3跳出一个循环的实例操作
2020/08/18 Python
世界最大的票务市场:viagogo
2017/02/16 全球购物
数据库连接池的工作原理
2012/09/26 面试题
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
学习张林森心得体会
2014/09/10 职场文书
车间班组长竞聘书
2015/09/15 职场文书
Python多线程 Queue 模块常见用法
2021/07/04 Python
基于Python实现股票收益率分析
2022/04/02 Python
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers