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. C. Ayoub and Lost Array cf dp

    C. Ayoub and Lost Array time limit per test 1 second memory limit per test 256 megabytes input stand ...

  2. 解决.NET Web API生成的Help无Controller说明&服务端接收不到请求

    今天在用.NET Web API写一个接口的时候遇到一个问题.在Controller中新加了一个方法,客户端就不能请求接口了,当时建WEB API项目是用的VS默认设置,在服务端打断点一直没有进去,而 ...

  3. [HEOI2016/TJOI2016]排序

    嘟嘟嘟 首先这题的暴力是十分好写的,而且据说能得不少分. 正解写起来不难,就是不太好想. 根据做题经验,我想到了给这个序列转化成01序列,但是接下来我就不会了.还是看了题解. 因为查询只有一个数,所以 ...

  4. 【css】IE盒子模型和标准W3C盒子模型

    其实盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型. 1.标准盒子 从上图可以看到标准 W3C 盒子模型的范围包括 margin.border.padding.content,并且 c ...

  5. rabbitmq的五种工作模式

    abbitmq的五种工作模式      

  6. ogg BR – BOUNDED RECOVERY 测试案例

    首先,我们来看两个OGG同步中可能的问题: l oracle在线日志包含已提交的和未提交的事务,但OGG只会将已提交的事务写入到队列文件.因此,针对未提交的事务,特别是未提交的长事务,OGG会怎样处理 ...

  7. GoldenGate OGG-01032 There Is a Problem in Network Communication Error in Writing to Rmt Remote Trail Rmttrail (Doc ID 1446621.1)

    GoldenGate OGG-01032 There Is a Problem in Network Communication Error in Writing to Rmt Remote Trai ...

  8. jvm 年轻代、年老代、永久代

    关键字约定 Young generation –>新生代    Tenured / Old Generation –>老年代    Perm Area –>永久代 年轻代: 所有新生 ...

  9. 使用java实现快速排序（挖坑填数法和指针交换法）

    快速排序:通过一趟排序,将数据分为两部分,其中一部分中的所有数据比另外一部分的所有数据要小,然后按照此方法,分别对这两部分进行排序,达到最终的排序结果. 每趟排序选取基准元素,比该基准元素大的数据放在 ...

  10. Ansible 简介

    Ansible 是一个开源的基于 OpenSSH 的自动化配置管理工具.可以用它来配置系统.部署软件和编排更高级的 IT 任务,比如持续部署或零停机更新.Ansible 的主要目标是简单和易用,并且它 ...