Easyui实例--tabs

   在前面说到的tree的基础上，这次说到了tabs，在layout布局时，点击树节点会在center中展示节点对应的数据信息，基本上都是以table或者easyUI中的datagrid来实现。

官方给出的API文档实现起来挺简单的，定义一个div，并给div标注tabs，在center中添加，点击节点的时候去添加一个tab。

1.API参考

官网提供了两种创建方式：

• HTML方式创建

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
    <div title="Tab1" style="padding:20px;display:none;">
        tab1
    </div>
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
        tab2
    </div>
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="display:none;">
        tab3
    </div>
</div>

• JS方式创建

API提供的tabs方法：

<div data-options="region:'center',title:'数据管理',split:true" style="text-align:center">
    	<div id="tt" class="easyui-tabs"  style="width:100%;height:100%;">
		   
		</div>
    </div>

JS中：通过iframe来实现

var tt = $("#tt");
	    
	   if(tt.tabs('exists',id)){  
		   tt.tabs('select',id);  
	    }else{  
	        url = url+"id="+id;  
	        var content="<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src="+url+"></iframe>";  
	        tt.tabs('add',{  
	            title:text,  
	            closable:true,  
	            content:content  
	        }); 
	    }   

2.代码实现

2.1 HTML

<div data-options="region:'center',title:'数据管理',split:true" style="text-align:center">
    	<div id="tt" class="easyui-tabs"  style="width:100%;height:100%;">
		   
		</div>
    </div>

在这里需要注意的是，一定要在id=tt，你所绑定的div中，加上easyUI-tabs这个样式，他跟tree用js生成不一样

这个样式是必须的，否则会报错，如下。一开始我认为是easyUI和jquery的版本问题，后来发现不是，应为官网下载的包里面 包含我们所需要的easyUI和jquery。在jsp页面引入的时候，直接引入它包里面自带的jquery就行，不需要额外的下载其他的jquery文件。当人还有类似的比如"tabs","options"等还有其他的错，都是undefined的错。

如果碰到这这种错误，请确认一下你们的jsp页面是不是引入了它的样式类。

       

2.2  JS创建

tree节点的onclick事件：

onClick:function(node){// 添加tab  
                 if(node.attributes){  
                     node1=$("#tree").tree('getParent',node.target);  
                     console.info(node1);
                     openTab(node.text,node.attributes,node.id);  
                 }  
             },  

    判断并添加新的tab：

//添加lab标签
	function openTab(text,url,id){ 
		var tt = $("#tt");
	    
	   if(tt.tabs('exists',id)){  
		   tt.tabs('select',id);  
	    }else{  
	        url = url+"id="+id;  
	        var content="<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src="+url+"></iframe>";  
	        tt.tabs('add',{  
	            title:text,  
	            closable:true,  
	            content:content  
	        }); 
	    }   
	}  

效果图如下：