easyui的tabs控制

Tabs(选项卡)

  • tabs
    • 依赖关系
    • 使用案例
      • 创建面板
        • 1. 通过标签创建选项卡
        • 2. 通过Javascript创建选项卡
      • 添加新的选项卡面板
      • 获取选择的选项卡
    • 属性
    • 事件
    • 方法
    • 选项卡面板
  • 代码案例

tabs

使用$.fn.tabs.defaults重写默认值对象。

选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单,包括关闭按钮和其他自定义按钮。
easyui的tabs控制_第1张图片

依赖关系

  • panel
  • linkbutton

使用案例

创建面板

1. 通过标签创建选项卡

通过标签可以更容易的创建选项卡,我们不需要写任何Javascript代码。只需要给

标签添加一个类ID’easyui-tabs’。每个选项卡面板都通过子
标签进行创建,用法和panel(面板)相同。

<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>  

2. 通过Javascript创建选项卡

下面的代码演示如何使用Javascript创建选项卡,当该选项卡被选择时将会触发’onSelect’事件。

$('#tt').tabs({    
    border:false,    
    onSelect:function(title){    
        alert(title+' is selected');    
    }    
});  

添加新的选项卡面板

添加一个新的包含小工具菜单的选项卡面板,小工具菜单图标(8x8)被放置在关闭按钮之前。

// add a new tab panel    
$('#tt').tabs('add',{    
    title:'New Tab',    
    content:'Tab Body',    
    closable:true,    
    tools:[{    
        iconCls:'icon-mini-refresh',    
        handler:function(){    
            alert('refresh');    
        }    
    }]    
});  

获取选择的选项卡

// get the selected tab panel and its tab object    
var pp = $('#tt').tabs('getSelected');    
var tab = pp.panel('options').tab;    // the corresponding tab object     

属性

easyui的tabs控制_第2张图片
easyui的tabs控制_第3张图片easyui的tabs控制_第4张图片

事件

easyui的tabs控制_第5张图片

方法

easyui的tabs控制_第6张图片easyui的tabs控制_第7张图片
easyui的tabs控制_第8张图片

选项卡面板

选项卡面板属性与panel组件属性的定义类似,下面是2个组件的一些公共属性。

属性名 属性值类型 描述 默认值
id string 选项卡面板的ID属性。 null
title string 选项卡面板的标题文本。
content string 选项卡面板的内容。
href string 从URL加载远程数据内容填充到选项卡面板。 null
cache boolean 如果为true,在’href’属性设置了有效值的时候缓存选项卡面板。 true
iconCls string 定义了一个图标的CSS类ID显示到选项卡面板标题。 null
width number 选项卡面板宽度。 auto
height number 选项卡面板高度。 auto
collapsible boolean 如果为true,则允许选项卡摺叠。 false

下面的是选项卡面板新增且独有的属性。

属性名 属性值类型 描述 默认值
closable boolean 在设置为true的时候,选项卡面板将显示一个关闭按钮,在点击的时候会关闭选项卡面板。 false
selected boolean 在设置为true的时候,选项卡面板会被选中。 false
disable boolean 在设置为true的时候,选项卡面板会被禁用。(该属性自1.4.4版开始可用) false

代码案例

把这个easyui的tabs控制_第9张图片
变成这个的代码easyui的tabs控制_第10张图片
index,js

$(function(){
	var ctx = $("#ctx").val();
	$('#tt').tree({    
	    url:ctx+'/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){
	        		var content = '';
		 	    	$('#bookTabs').tabs('add',{    
		 	    	    title:node.text,    
		 	    	    content:content,    
		 	    	    closable:true,    
		 	    	    tools:[{    
		 	    	        iconCls:'icon-mini-refresh',    
		 	    	        handler:function(){    
		 	    	            alert('refresh');    
		 	    	        }    
		 	    	    }]    
		 	    	});  
	        	}
	 	        
	        }	       	
	    	
	    }
	    	
	});  	
	
})

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 写全局样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<!-- 定义图标的样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">   

<!--组件库源文件的js文件  -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>  
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>   
<script type="text/javascript" 
		src="${pageContext.request.contextPath }/static/js/index.js"></script>   

<title>登录后的主界面</title>
</head>
<input type="text" id="ctx" value="${pageContext.request.contextPath }">
<body class="easyui-layout">

		<div data-options="region:'north',border:false" 
			style="height:60px;background:#B3DFDA;padding:10px">网上书城</div>
		<div data-options="region:'west',split:true,title:'目录'" 
			style="width:150px;padding:10px;">
			<ul id="tt"></ul>  
			</div>
		<div data-options="region:'east',split:true,collapsed:true,title:'右边'" 
			style="width:100px;padding:10px;">east region</div>
		<div data-options="region:'south',border:false" 
			style="height:50px;background:#A9FACD;padding:10px;">底部版权</div>
		<div data-options="region:'center',title:'内容'">
			
			<div id="bookTabs" class="easyui-tabs" style="width:100%;height:100%;">   
			    <div title="首页" style="padding:20px;display:none;">   
			       本站各种数据指标(各个模块的使用情况、数据量、报表)   
			    </div>   			    
			</div>  			
			
		</div>

</body>
</html>

你可能感兴趣的:(easyui的tabs控制)