easyuiTabs组件

Tabs

选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。

Tabs组件属性

Tabs组件方法

Tabs组件事件

案例解析

1、静态
jsp代码

<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="padding:20px;display:none;">   
        tab3    
    </div>   
</div>  

效果

分析：jsp代码过多，繁杂冗余
2、动态
jsp代码

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">   
    <div title="Tab1" style="padding:20px;display:none;">   
        tab1    
    </div>   
</div>  

js代码

$(function(){
$('#tt').tabs({    
    border:false,    
    onSelect:function(title){    
        alert(title+' is selected');    
    }    
}); 
$('#tt').tabs('add',{    
    title:'New Tab',    
    content:'Tab Body',    
    closable:true,    
    tools:[{    
        iconCls:'icon-mini-refresh',    
        handler:function(){    
            alert('refresh');    
        }    
    }]    
});   
})

效果：每次刷新会出现一个New Tab界面

那么就引出我们遇到的问题
目前问题1：相同的tab页反复打开
判断是否存在相同的选项卡，如果存在就切换到对应的选项卡，如果不存在就打开一个
问题2：非叶子节点（当url为空）按开发角度来说是不能打开页面的
因此

$(function(){
	var ctx=$("#ctx").val();
	$('#tt').tree({    
	    url:ctx+'/permission.action?methodName=menuTree',
	    onClick: function(node){
//			alert(node.text);  // 在用户点击的时候提示
			//目前问题：相同的tab页反复打开
			//判断是否存在相同的选项卡，如果存在就切换到对应的选项卡，如果不存在就打开一个
	    	if($('#bookTabs').tabs('exists',node.text)){
//	    		切換選項卡
	    		$('#bookTabs').tabs('select',node.text);
	    	}else{//新增選項卡
	    	//非叶子节点（当url为空）按开发角度来说是不能打开页面的
	    		var src=node.attributes.self.url;
	    		if(src){
	    			var content=' <iframe scrolling="no" frameborder="0" src="'+ctx+src+'" width="99%" height="99%"></iframe>';
			    	$('#bookTabs').tabs('add',{    
			    	    title:node.text,    
			    	    content:content,    
			    	    closable:true,    
			    	    tools:[{    
			    	        iconCls:'icon-mini-refresh',    
			    	        handler:function(){    
			    	            alert('refresh');     
			    	        }    
			    	    }]    
			    	});  
	    		}
	    		
	    	}
	    	
		}
	});  
	$('#bookTabs').bind('contextmenu',
    		function(e) {
			e.preventDefault();
			$('#mymenu').menu('show', {
						left : e.pageX,
						top : e.pageY
			             			});
					   });
	//关闭所有标签页
	$('#closeAll').bind("click",function(){
		var tablist = $('#bookTabs').tabs('bookTabs');//获取所有选项卡的面板
		for(var i=tablist.length-1;i>=0;i--){
			$('#bookTabs').tabs('close',i);//循环将它们都关了
		}
	});
	
})

效果：