easyui静态tree点击打开右侧tab实现

jsp

div中
左侧

      

中心

 

    	

    		
欢迎进入系统
    	
    
   

同时自定义左侧小图标，添加16*16图片到icon文件夹下，在icon.css中添加相应条目

js中

$(function(){
	$('#tabs').tabs({
		fit:true,
		border:false,
	});
 
    //在右边center区域打开菜单，新增tab  
    function Open(text, url,icon) {  
        if ($("#tabs").tabs('exists', text)) {  
            $('#tabs').tabs('select', text);  
        } else {  
            $('#tabs').tabs('add', {  
                title : text,  
                closable : true,  
                content : url,
                iconCls : icon
            });  
        }  
    }  
    $('#nav').tree({
    	data: [{
    		text:"系统模块",
    		"iconCls":"icon-system",    
    	    "children":[{    
    	        "text":"审核模块", 
    	        "iconCls":"icon-check",
    	        "children":[{
    	        	"text":"身份审核", 
    		        "iconCls":"icon-admin",
    	        	attributes : {  
    	                url : ''  
    	            }    
    	        },{
    	        	"text":"请假审核", 
    		        "iconCls":"icon-holiday",
    	        	attributes : {  
    	                url : ''  
    	            }
    	        }]
    	    },{
    	    	"text":"成绩模块", 
    	        "iconCls":"icon-record",
    	        "children":[{
    	        	"text":"上传成绩",   		     
    		        "iconCls":"icon-grade",
    	        	attributes : {  
    	                url : ''  
    	            }    
    	        }]
    	    },{
    	    	"text":"课表模块", 
    	       
    	        "iconCls":"icon-course",
    	        "children":[{
    	        	"text":"上传成绩", 	      
    		        "iconCls":"icon-up",
    	        	attributes : {  
    	                url : ''  
    	            }    
    	        }]
    	    },{
    	    	"text":"聊天功能", 
    	        "iconCls":"icon-chat",
    	        attributes : {  
                    url : ''  
                }
    	    }]
    	}],
    	lines : true,  
      onClick : function (node) {  
          if (node.attributes) {  
              Open(node.text, node.attributes.url,node.iconCls);  
          }  
      }  
    
    });



});