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 相关文章推荐
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
JavaScript弹出窗口方法汇总
Aug 12 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 Javascript
微信小程序支付及退款流程详解
Nov 30 Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 Javascript
Vue.extend 登录注册模态框的实现
Dec 29 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中使用unset销毁变量并内存释放问题
2012/07/05 PHP
destoon二次开发入门示例
2014/06/20 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
php实现网站留言板功能
2015/11/04 PHP
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
JavaScript实现强制重定向至HTTPS页面
2015/06/10 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
土木工程实习生自我鉴定
2013/09/19 职场文书
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
商务日语毕业生自荐信范文
2013/11/14 职场文书
优良学风班申请材料
2014/02/13 职场文书
村庄绿化方案
2014/05/07 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
Python使用psutil库对系统数据进行采集监控的方法
2021/08/23 Python