Métodos de implementación del efecto de pestaña interactiva en el menú de árbol zTree

1、 Añadir atributo personalizado page

2、 Agregar evento de clic para cada nodo del árbol ztree

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Uso del menú en forma de árbol ztree</title>
 <!-- importar biblioteca de clasesjquery -->
 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
 <!-- importar biblioteca de clases easyui -->
 <link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/temas/default/easyui.css" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="../js/easyui/temas/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/<script src="../script>
 <!--importar 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">
  //ejecutar después de que se cargue la página
  $(function() {
  //1.realizar configuración del menú en forma de árbol ztree, habilitar soporte de datos JSON simple
  var setting = {
   data: {
   simpleData: {
    habilitar: true//habilitar soporte de formato de datos JSON simple
   }
   },
   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>'
    //Do not open the tab for tree menu without setting the page attribute
    if(treeNode.page!=undefined && treeNode.page!=""){
    //If the tab is already open, select it
    if($("#mytabs").tabs('exists',treeNode.name)){
     //Select tab
     $("#mytabs").tabs('select',treeNode.name);
    }
     //If not opened, add a tab
     $("#mytabs").tabs('add',{
     title:treeNode.name,</br>
     content:content,</br>
     closable:true
     });
    }
    }
   }
   }
  };
  //2.provide ztree tree menu data
  var zNodes = [
   {id:1,pId:0,name:"Parent node one"},
   {id:2,pId:0,name:"Parent node two"},
   {id:11,pId:1,name:"Subnode one"},
   {id:12,pId:1,name:"Subnode two"},
   {id:13,pId:2,name:"CSDN Blog",page:"http://blog.csdn.net/a772304419"},
   {id:14,pId:2,name:"Blog园",page:"http://www.cnblogs.com/niwotaxuexiba/"}
  ];
  //3.generate tree menu
  $.fn.zTree.init($("#baseMenu"),setting,zNodes);
  });
 </script>
 </head>
 <body class="easyui-layout">
 <div data-options="region:'north',title:'niwotaxuexiba-¡excelente blog para aprender Java!'" style="height:100px"></div>
 <div data-options="region:'west',title:'menu navigation'" style="width:200px">
  <!--plegable panel-->
  <div class="easyui-accordion" data-options="fit:true">
  <div data-options="title:'menú básico'">
   <!--Crear un menú de árbol mediante el complemento ztree-->
   <ul id="baseMenu" class="ztree"></ul>
  </div>
  <div data-options="title:'menú de sistema'">tu yo él sitio de aprendizaje</div>
  </div>
 </div>
 <div data-options="region:'center',title:'región central'">
  <!--pantalla de panel de pestañas-->
  <div id="mytabs" class="easyui-tabs" data-options="fit:true">
  <div data-options="title:'pantalla de panel de pestañas uno',closable:true">pantalla de panel de pestañas uno</div>
  <div data-options="title:'pantalla de panel de pestañas dos',closable:true">pantalla de panel de pestañas dos</div>
  </div>
 </div>
 <div data-options="region:'east',title:'región oriental'" style="width:100px"></div>
 <div data-options="region:'south',title:'región sur'" style="height:100px"></div>
 </body>
</html>

La forma de implementar el efecto de la pestaña de menú de árbol de zTree que comparto con todos ustedes es todo el contenido que he compartido, espero que les sea útil y que todos nos apoyemos mutuamente en el tutorial de grito.

Declaración: El contenido de este artículo se ha obtenido de la red, es propiedad del autor original, el contenido se ha subido de manera autónoma por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no se ha realizado una edición humana y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#w.3Aviso: El contenido de este artículo se ha obtenido de la red, es propiedad del autor original, el contenido se ha subido de manera autónoma por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no se ha realizado una edición humana y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#w proporcionando evidencia relevante, una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.

Tutoriales básicos

Te gustará