zTree树形菜单交互选项卡效果的实现方法
时间:2019-04-12
本文章向大家介绍zTree树形菜单交互选项卡效果的实现方法,主要包括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" 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树形菜单交互选项卡效果的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- python django 学习(一)数据库 目的根据已有BBS建立新的网站步骤
- SpringMVC中@RequestMapping的基本用法
- Java面试系列13
- 【Go 语言 时间相关操作 demo】
- redis AOF保存机制
- 用 TensorFlow 让你的机器人唱首原创给你听
- 不用synchronized块的话如何实现一个原子的i++?
- Oracle升级中的参数补充(r9笔记第2天)
- 【Go 语言,服务器模块】日志系统源码
- wait方法和sleep方法的区别
- Java面试系列10
- python django整理(三)页面基础(仿BBS)
- 高并发场景下的httpClient优化使用
- socket.io 相关:Example: A simple chat server(官方 实例)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 在 Linux 命令行中使用 tcpdump 抓包的一些功能
- CentOS平台快速搭建LAMP环境的方法
- Linux系统中时间的获取和使用
- 基于Linux搭建Apache网站服务配置详解
- CentOs下手动升级node版本的方法
- 详述Linux中Firewalld高级配置的使用
- CentOS7安装PHP7 Redis扩展的方法步骤
- centos7下rsync+crontab定期同步备份
- 你可能不知道的一些linux文件权限管理方法
- 原来SqlSession只是个甩手掌柜?真正干活的是谁?
- Linux下的定时任务和延时任务的详解
- 使用 chkconfig 和 systemctl 命令启用或禁用 Linux 服务的方法
- Packetdrill的简明使用手册
- linux操作系统下配置ssh/sftp和权限设置方法
- linux把php升级到5.6的实操方法