Tutoriel sur les onglets interactifs du menu arborescent zTree-js tutoriel-php.cn

Tutoriel sur les onglets interactifs du menu arborescent zTree

php中世界最好的语言

Libérer： 2018-04-13 16:00:00

original

1338 Les gens l'ont consulté

Cette fois, je vais vous proposer un tutoriel sur l'onglet interactif du menu arborescent zTree. Quelles sont les précautions pour l'onglet interactif du menu arborescent zTree Voici un cas pratique, jetons un coup d'œil.

1. Ajouter une page attributs personnalisée

2. Pour chaque nœud d'arbre dans ztree, ajoutez un événement click

<!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 = '<p style="width:100%;height:100%;overflow:hidden;">'+'<iframe src="&#39;+treeNode.page+&#39;" scrolling="auto" style="width:100%;height:100%;border:0;"></iframe></p>'
    //没有设置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">
 <p data-options="region:&#39;north&#39;,title:&#39;你我他学习吧-学习Java的好博客！&#39;" style="height:100px"></p>
 <p data-options="region:&#39;west&#39;,title:&#39;菜单导航&#39;" style="width:200px">
  <!--折叠面板-->
  <p class="easyui-accordion" data-options="fit:true">
  <p data-options="title:&#39;基础菜单&#39;">
   <!--通过ztree插件，制作树形菜单-->
   <ul id="baseMenu" class="ztree"></ul>
  </p>
  <p data-options="title:&#39;系统菜单&#39;">你我他学习吧</p>
  </p>
 </p>
 <p data-options="region:&#39;center&#39;,title:&#39;中部区域&#39;">
  <!--选项卡面板-->
  <p id="mytabs" class="easyui-tabs" data-options="fit:true">
  <p data-options="title:&#39;选项卡面板一&#39;,closable:true">选项卡面板一</p>
  <p data-options="title:&#39;选项卡面板二&#39;,closable:true">选项卡面板二</p>
  </p>
 </p>
 <p data-options="region:&#39;east&#39;,title:&#39;东部区域&#39;" style="width:100px"></p>
 <p data-options="region:&#39;south&#39;,title:&#39;南部区域&#39;" style="height:100px"></p>
 </body>
</html>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez payer. attention aux autres articles connexes sur le site PHP chinois !

Lecture recommandée :

Comment accélérer et optimiser le code vue-cli

Comment utiliser la garde de navigation de VueRouter

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!