Umsetzungsmethode der Interaktions-Tab-Effekte des Baummenüs zTree

1、Eigenen Attribut page hinzufügen

2、Klickereignis für jeden Knoten der Ztree hinzufügen

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Ztree-Menüstruktur verwenden</title>
 !-- JQuery-Kernbibliothek importieren -->
 <script type="text/javascript" src="../js/jquery-1.8.3.js"></skript>
 !-- EasyUI-Bibliothek importieren -->
 <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"></skript>
 !--Ztree einbinden-->
 <script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="utf-8></skript>
 <link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css" rel="external nofollow" />
 <script type="text/javascript">
  //Nach dem Laden der Seite ausführen
  $(function() {
  //1.Ztree-Menüstruktur einrichten, Unterstützung für einfaches JSON aktivieren
  var setting = {
   data:{
   simpleData:{
    enable:true//Aktivierung der Unterstützung für einfaches JSON-Datenformat
   }
   },
   callback:{
   onClick:function(event,treeId,treeNode,clickFlag){
    var content = '<div style="width:100%;Höhe:100%;Überschreitung:versteckt;">'+'<iframe src="'+treeNode.page+" scrolling="auto" style="width:100%;Höhe:100%;Ränder:0;"></iframe></div>'
    //Baummenü ohne gesetzte page-Attribut, Registerkarte nicht öffnen
    wenn(treeNode.page!=undefined && treeNode.page!=""){
    //wenn die Registerkarte bereits geöffnet ist, wählen Sie sie aus
    wenn($("#mytabs").tabs('exists',treeNode.name)){
     //wählen Sie die Registerkarte aus
     $("#mytabs").tabs('select',treeNode.name);
    }else{
     //wenn nicht geöffnet, fügen Sie eine Registerkarte hinzu
     $("#mytabs").tabs('add',{
     titel:treeNode.name,
     inhalt:content,
     closable:true
     });
    }
    }
   }
   }
  };
  //2.bietet ztree Baummenü-Daten
  var zNodes = [
   {id:1,pId:0,name:"Elternnode eins"},
   {id:2,pId:0,name:"Elternnode zwei"},
   {id:11,pId:1,name:"Unternode eins"},
   {id:12,pId:1,name:"Unternode zwei"},
   {id:13,pId:2,name:"CSDN Blog",page:"http://blog.csdn.net/a772304419"},
   {id:14,pId:2,name:"Blog Garden",page:"http://www.cnblogs.com/niwotaxuexiba/"}
  ];
  //3.erzeugt ein Baummenü
  $.fn.zTree.init($("#baseMenu"),setting,zNodes);
  });
 </skript>
 </kopf>
 <body class="easyui-layout">
 <div data-options="region:'north',title:'Wir, du, er Lernbar-gute Blog-Seite für Java-Lernen!'" style="height:100px"></div>
 <div data-options="region:'west',title:'Menü-Navigation'" style="width:200px">
  !--Falterscheibe-->
  <div class="easyui-accordion" data-options="fit:true">
  <div data-options="title:'Grundmenü'">
   !--Mit dem zTree-Plugin wird ein Baummenü erstellt-->
   <ul id="baseMenu" class="ztree"></ul>
  </div>
  <div data-options="title:'Systemmenü'">Wir lernen gemeinsam</div>
  </div>
 </div>
 <div data-options="region:'center',title:'Mittlerer Bereich'">
  !--Tab-Panel-->
  <div id="mytabs" class="easyui-tabs" data-options="fit:true">
  <div data-options="title:'Tab-Panel Eins',closable:true">Tab-Panel Eins</div>
  <div data-options="title:'Tab-Panel Zwei',closable:true">Tab-Panel Zwei</div>
  </div>
 </div>
 <div data-options="region:'east',title:'Östlicher Bereich'" style="width:100px"></div>
 <div data-options="region:'south',title:'Südlicher Bereich'" style="height:100px"></div>
 </body>
</html>

Diese Anleitung zur Implementierung des zTree-Tree-Menu-Interaktions-Tab-Effekts ist der gesamte Inhalt, den der Autor Ihnen mitteilt. Ich hoffe, es kann Ihnen als Referenz dienen und ich hoffe, dass alle das Anleitungsbuch unterstützt.

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheberrecht des jeweiligen Autors. Der Inhalt wurde von Internetnutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie verdächtige urheberrechtliche Inhalte finden, freuen wir uns über eine E-Mail an: notice#oldtoolbag.com (Bitte ersetzen Sie # durch @ beim Senden einer E-Mail zur Meldung von Verstößen und stellen Sie relevante Beweise zur Verfügung. Sobald nachgewiesen, wird diese Website die beanstandeten Inhalte sofort löschen.)

Grund教程

Gefällt mir