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. js开发打印证书功能

    最近突然被加了要打印证书的功能的需求.其实打印功能很简单,直接调用window.print()就可以打印,只是这是最基本的打印,会打印当前页面的所有元素,而我们要的是局部打印,实现方法: 1.设置好开 ...

  2. 小a的排列

    链接:https://ac.nowcoder.com/acm/contest/317/G来源:牛客网 小a有一个长度为nn的排列.定义一段区间是"萌"的,当且仅当把区间中各个数排序 ...

  3. 微信硬件平台（七）微信开发--如何存储并定时更新access_token

    https://blog.csdn.net/sct_t/article/details/53002611 我们知道请求access_Token会返回这样一个json,包括access_token(凭证 ...

  4. pip 提速方法

    Python 包管理软件 pip 在默认情况下,下载安装 Python 包太慢,容易失败.以下给出解决方案. pip install 的选项说明如下: Package Index Options: - ...

  5. springboot 创建非web项目及数据源简单使用

    项目组马上要使用springboot来重构程序,首先要对几个比较小的非web项目重构,所以新手入门,简单做了个小例子 代码结构如下: dao层 package com.mysping.myboot00 ...

  6. (折扣计算)需求说明：普通顾客购物满100元打9折；会员购物打8折；会员购物满200元打7.5折（判断语句if-else和switch语句的嵌套结

    package com.summer.cn; import java.util.Scanner; /** * @author Summer *折扣计算 需求说明:普通顾客购物满100元打9折:会员购物 ...

  7. python：unittest之discover()方法批量执行用例

    自动化测试过程中,自动化覆盖的功能点和对应测试用例之间的关系基本都是1 VS N,如果每次将测试用例一个个单独执行,不仅效率很低, 无法快速反馈测试结果,而且维护起来很麻烦.在python的单元测试框 ...

  8. 下拉框选择blur与click冲突问题

    缘由:今天在做下拉框选择时,遇到click和blur冲突问题:具体现象如下 1.intput框获取焦点(focus事件)时显示隐藏的下拉框,失去焦点(blur事件)则隐藏下拉框 2.点击选择(clic ...

  9. Mysql字段名与保留字冲突导致的异常解决

    一:引言 用hibernate建表时经常遇到的一个异常:Error executing DDL via JDBC Statement 方法: 查看报错sql语句.问题就在这里. 我是表名(字段名)与保 ...

  10. elasticsearch简单操作(一)

    1.增加记录 例如1:向指定的 /Index/Type 发送 PUT 请求,就可以在 Index 里面新增一条记录.比如,向/accounts/person发送请求,就可以新增一条人员记录. curl ...