EasyUi之Tabs组件

Tabs组件

属性

事件

方法

案例

实现效果

看一下数据库中的数据

在jsp页面中调用js代码
写在我们之前写的layout布局的Center里面

<div data-options="region:'center',title:'Center'">
		<div id="bookTabs" class="easyui-tabs" style="width:100%;height:100%;">   
    	<div title="首页" style="padding:20px;display:none;">本站各种数据指标（各个模块的使用情况，数据量、报表） </div>   
	</div>

js代码

$(function(){
	var ctx=$("#ctx").val();
	$('#tt').tree({    
	    url:$("#ctx").val()+'/permission.action?methodName=menuTree',   
	    //点击事件，只有点击树形菜单才会新增
	    onClick:function(node){   	
//      判断面板是否存在，有的话就不用新增了
	    	if($('#bookTabs').tabs('exists',node.text)){
//	    		切换选项卡
	    		$('#bookTabs').tabs('select',node.text);
	    	}else{
//	    		新增选项卡
//	    		存在问题：非叶子节点按照开发角度来说是不能够打开页面的
//	    		分析：非叶子节点都没有跳转页面的
//				路径
	    		var src=node.attributes.self.url;
	    		if(src){
	    		//数据中url的地址
	    			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');    
			    	        }    
			    	    }]    
			    	}); 
	    		}
	    	}
	    }
	});  
})

总结

今天的tabs选项卡就分享到这，谢谢大家的观看！