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 相关文章推荐
输入框过滤非数字的js代码
Sep 18 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
Apr 23 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
angularjs 页面自适应高度的方法
Jan 17 Javascript
JS中常用的消息框总结
Feb 24 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
基于D3.js实现时钟效果
Jul 17 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 Javascript
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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
德生PL330的评价与改造
2021/03/02 无线电
搜索引擎技术核心揭密
2006/10/09 PHP
PHP小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
一个超级简单的python web程序
2014/09/11 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
python交互式图形编程实例(二)
2017/11/17 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
python3 requests中使用ip代理池随机生成ip的实例
2018/05/07 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
python装饰器常见使用方法分析
2019/06/26 Python
python3调用windows dos命令的例子
2019/08/14 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
pandas中ix的使用详细讲解
2020/03/09 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
违反学校规定检讨书
2014/01/18 职场文书
高中数学教学反思
2014/01/30 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
医院员工辞职信范文
2015/05/12 职场文书
教师思想工作总结2015
2015/05/13 职场文书
高一英语教学反思
2016/03/03 职场文书
Django实现drf搜索过滤和排序过滤
2021/06/21 Python
MySQL 计算连续登录天数
2022/05/11 MySQL