easyui的tabs控制

最新推荐文章于 2023-05-17 11:41:33 发布

涵ヂ

最新推荐文章于 2023-05-17 11:41:33 发布

阅读量484

点赞数

本文链接：https://blog.csdn.net/TZyybhs/article/details/106936940

版权

本文介绍了EasyUI的Tabs组件，详细讲解了依赖关系、创建面板（包括通过标签和JavaScript）、添加新选项卡面板、获取选择的选项卡、属性、事件、方法等内容，并提供了代码案例进行示例说明。

摘要由CSDN通过智能技术生成

Tabs（选项卡）

tabs
代码案例

tabs

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

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

依赖关系

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

属性

在这里插入图片描述

事件

在这里插入图片描述

方法

在这里插入图片描述

选项卡面板

选项卡面板属性与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

代码案例

把这个在这里插入图片描述
变成这个的代码
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 = '<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');    
		 	    	        }    
		 	    	    }]    
		 	    	});  
	        	}
	 	        
	        }	       	
	    	
	    }
	    	
	});  	
	
})

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>