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">

         <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">

         <link rel="stylesheet" type="text/css" href="../css/default.css">

         <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" />

         <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树形菜单交互选项卡效果实现的更多相关文章

  1. zTree树形菜单使用实例

    在每个节点添加 id 和 pid, id 表示当前节点编号,pid 表示父节点编号 第一步:在页面显示菜单位置,添加 ul设置 class=”ztree” 第二步:开启简单数据格式支持 第三步:编写树 ...

  2. ztree树形菜单的增加删除修改和换图标

    首先需要注意一点,如果有研究过树形菜单,就会发现实现删除和修改功能特别简单,但是增加却有一点复杂.造成这个现象是ztree树形菜单的历史遗留问题.大概是之前的版本没有增加这个功能,后来的版本加上了这个 ...

  3. Bootstrap风格zTree树形菜单插件

    这是一款bootstrap风格jQuery zTree树形菜单插件,支持自定义编辑.添加列表菜单.删除列表等功能的jQuery树形菜单代码.在线演示 具体代码实现: <!DOCTYPE html ...

  4. ztree树形菜单demo

    阅读目录 zTree树形菜单 回到顶部 zTree树形菜单 树形菜单使用方式如下:HTML引入的方式如下: <!DOCTYPE html> <html> <head> ...

  5. 默认展开ztree树形菜单

    var setting = { view: { selectedMulti: false //按住ctrl是否可以多选 }, check: { enable: true , chkStyle: 'ch ...

  6. thinkphp5 ztree树形菜单

    教程:http://makaidong.com/zjfjava/4074_5873678.html 下载:https://github.com/zTree/zTree_v3

  7. EasyUI+zTree实现简单的树形菜单切换

    使用easyui_ztree实现简单的树形菜单切换效果 <!DOCTYPE html> <html> <head> <meta charset="U ...

  8. react ant design TreeNode——树形菜单笔记

     2017-12-04补充说明——树形菜单版本号2.x 设置默认该树形组件展开(默认展开所有树节点) 参考文档的写法: defaultExpandAll={true} //经过测试并不生效, 另外注意 ...

  9. 使用zTree插件构建树形菜单

    zTree下载:https://github.com/zTree/zTree_v3 目录: 就我看来,zTree较为实用的有以下几点: zTree 是一个依靠 jQuery 实现的多功能 “树插件”. ...

随机推荐

  1. [Java] SpringMVC工作原理之三：ViewResolver

    一.ViewResolver 根据视图的名称将其解析为 View 类型的视图,如通过 ModelAndView 中的视图名称将其解析成 View,View 是用来渲染页面的,也就是将 Model 填入 ...

  2. Jmeter插件安装及使用

    1 安装Plugins Manager插件 1.1 下载Plugins Manager插件 插件下载官方地址:https://jmeter-plugins.org/downloads/all/ 将下载 ...

  3. centos下安装 glances 的问题

    开始想安装htop 然后 yum installhtop 没有 yum searchhtop 也没有  然后上github 发现一个比htop还华丽的东西. Glances 大概这个样子的. 可以一览 ...

  4. nginx进行反向代理，80端口使用

    环境说明:centos7 安装版本:tengine2.2.2 实现目的: 想用本地80端口,代理其它服务器的非80端口,实现80端口复用 [root@tiaobanji conf]# cat ngin ...

  5. C# WebApi 获取客户端ip地址

    转自:http://www.cnblogs.com/weixing/p/5674078.html References required: HttpContextWrapper - System.We ...

  6. 001_自定义过滤及添加文件内容脚本(nginx)

    一.工作中遇到sed添加及修改在nginx末尾添加太麻烦了 需求:随意查找添加一条以前不存在的内容加到"}"前一行 实现: #!/usr/bin/env python # codi ...

  7. ISCC：Please give me username and password!

    地址:http://118.190.152.202:8017/ 题目说 给用户名和密码, 构造url为:118.190.152.202:8017/?username=sda&password= ...

  8. 线程的synchronized、volatile及原子操作

    public class ThreadDemo7{ //structs2线程不安全 共享变量 //n++ 复合操作 对于volatile修饰的变量不安全 //原子操作 int value; //让方法 ...

  9. .net core 简单项目的创建

    1.linux 安装net coref https://www.microsoft.com/net/learn/get-started/linuxubuntu 2.创建目录 2.创建控制台项目 第一次 ...

  10. 深入理解Java虚拟机（类文件结构+类加载机制+字节码执行引擎）

    目录 1.类文件结构 1.1 Class类文件结构 1.2 魔数与Class文件的版本 1.3 常量池 1.4 访问标志 1.5 类索引.父索引与接口索引集合 1.6 字段表集合 1.7 方法集合 1 ...