Tree前端实现

一.本章实现目标：

 需要用到tree控件和tabs控件：tree实现左侧的菜单栏效果，tabs实现右边摘要内容

二.思路步骤：

               1、首先要在js文件专门建一个写js代码的file文件（index.js）

$(function(){
 $('#stuMenu').tree({    
     url:'tree_data1.json'  ,
     onClick: function(node){
//  alert(node.text);  // 在用户点击的时候提示
      var exists = $('#stuTabs').tabs('exists',node.text);
      if(exists){
    	  
       $('#stuTabs').tabs('select',node.text);    
      
      }else{  
       $('#stuTabs').tabs('add',{    
        title:node.text,    
        content:'<iframe width="100%" height="100%" src="'+node.attributes.url+'"></iframe>',    
        closable:true,    
    });  
      }
  
     }
 });  
}) 

               2、将我们需要的tree-data1-json文件导入到web—content中

[{
 "id":1,
 "text":"My Documents",
 "children":[{
  "id":11,
  "text":"Photos",
  "state":"closed",
  "children":[{
   "id":111,
   "text":"Friend"
  },{
   "id":112,
   "text":"Wife"