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树形菜单交互选项卡效果的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

zTree树形菜单交互选项卡效果的实现方法

请登录后发表评论