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中的Window窗口对象
Jan 16 Javascript
JQUERY 浏览器判断实现函数
Aug 20 Javascript
js 省地市级联选择
Feb 07 Javascript
一个XML格式数据转换为图表的例子
Feb 09 Javascript
JS去除数组重复值的五种不同方法
Sep 06 Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 Javascript
原生javascript实现的一个简单动画效果
Mar 30 Javascript
Javascript农历与公历相互转换的简单实例
Oct 09 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 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
Laravel学习教程之View模块详解
2017/09/18 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
Add Formatted Text to a Word Document
2007/06/15 Javascript
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
CSS3教程:边框属性border的极致应用
2009/04/02 HTML / CSS
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
介绍一下Ruby的多线程处理
2013/02/01 面试题
机械工程系毕业生求职信
2013/09/27 职场文书
学校万圣节活动方案
2014/02/13 职场文书
文秘求职信范文
2014/04/10 职场文书
经济类毕业生求职信
2014/06/26 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
环卫工人慰问信
2015/02/15 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL
vue3不同环境下实现配置代理
2022/05/25 Vue.js