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

jsp

div中
左侧

<script type="text/javascript" src="js/home.js"></script>

    <div data-options="region:'west',title:'导航',split:true,collapsible:false,iconCls:'icon-system'" 
    	style="width:200px;padding:10px">
    		<ul id="nav"></ul>

       </div>
中心

 <div data-options="region:'center'" style="overflow:hidden;">
    	<div id="tabs">
    		<div title="起始页" style="padding:0,10px;display:block;">欢迎进入系统</div>
    	</div>
    </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 : '<iframe width="100%" height="100%" frameborder="0"  src="tab1.jsp" style="width:100%;height:100%;margin:0px 0px;"></iframe>'  
    	            }    
    	        },{
    	        	"text":"请假审核", 
    		        "iconCls":"icon-holiday",
    	        	attributes : {  
    	                url : '<iframe width="100%" height="100%" frameborder="0"  src="tab2.jsp" style="width:100%;height:100%;margin:0px 0px;"></iframe>'  
    	            }
    	        }]
    	    },{
    	    	"text":"成绩模块", 
    	        "iconCls":"icon-record",
    	        "children":[{
    	        	"text":"上传成绩",   		     
    		        "iconCls":"icon-grade",
    	        	attributes : {  
    	                url : '<iframe width="100%" height="100%" frameborder="0"  src="tab3.jsp" style="width:100%;height:100%;margin:0px 0px;"></iframe>'  
    	            }    
    	        }]
    	    },{
    	    	"text":"课表模块", 
    	       
    	        "iconCls":"icon-course",
    	        "children":[{
    	        	"text":"上传成绩", 	      
    		        "iconCls":"icon-up",
    	        	attributes : {  
    	                url : '<iframe width="100%" height="100%" frameborder="0"  src="tab4.jsp" style="width:100%;height:100%;margin:0px 0px;"></iframe>'  
    	            }    
    	        }]
    	    },{
    	    	"text":"聊天功能", 
    	        "iconCls":"icon-chat",
    	        attributes : {  
                    url : '<iframe width="100%" height="100%" frameborder="0"  src="tab5.jsp" style="width:100%;height:100%;margin:0px 0px;"></iframe>'  
                }
    	    }]
    	}],
    	lines : true,  
      onClick : function (node) {  
          if (node.attributes) {  
              Open(node.text, node.attributes.url,node.iconCls);  
          }  
      }  
    
    });



});