学好easyui的tabs控件，走遍天下都不怕

最新推荐文章于 2023-07-20 15:08:25 发布

原创最新推荐文章于 2023-07-20 15:08:25 发布 · 799 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#easyui #tab #js #java

笔记专栏收录该内容

45 篇文章

订阅专栏

本文介绍了EasyUI的tabs控件，包括其作用、依赖和实现方式。讲解了如何通过标签创建选项卡，使用add方法动态添加新面板，并结合onClick事件实现交互功能。示例展示了将tabs应用于实际项目，帮助读者掌握tabs的使用技巧。

easyui的tabs控件

一、tabs的简介
- 1、解释以及作用
- 2、依赖
二、tabs的实项
三、总结

一、tabs的简介

1、解释以及作用

1、选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。
2、Tabs 有多个可以动态地添加或移除的面板（panel）。您可以使用 Tabs 来在相同的页面上显示不同的实体。
3、Tabs 一次仅仅显示一个面板（panel），每个面板（panel）都有标题、图标和关闭按钮。当 Tabs 被选中时，将显示对应的面板（panel）的内容。
在这里插入图片描述

2、依赖

panel（面板：承载其它内容的容器）
linkbutton（按钮：按钮组件使用超链接按钮创建）

二、tabs的实项

首先，要了解我们所要完成的是什么？
要完成的示例图在下面：
在这里插入图片描述

1、通过标签创建选项卡

那我们首先把tabs的一个源码复制下来：

<div class="easyui-tabs" style="width:700px;height:250px">
		<div title="About" style="padding:10px">
			<p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
			<ul>
				<li>easyui is a collection of user-interface plugin based on jQuery.</li>
				<li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
				<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
				<li>complete framework for HTML5 web page.</li>
				<li>easyui save your time and scales while developing your products.</li>
				<li>easyui is very easy but powerful.</li>
			</ul>
		</div>
		<div title="My Documents" style="padding:10px">
			<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul>
		</div>
		<div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
			This is the help content.
		</div>
	</div>

复制之后放入index.jsp里面就可以了。
那放在哪里呢？看例图可以知道是放在center里面。在这里插入图片描述
所以代码应该是这样的：

//zouyan
<%@ 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/default/easyui.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>
<!-- 组件库源码的js文件 -->
<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="hidden" id="ctx" value="${pageContext.request.contextPath}">
<body class="easyui-layout">
	<div data-options="region:'north',border:false"
		style="height: 60px; background: #B3DFDA; padding: 10px">XXX管理系统
		</div>
	<div data-options="region:'west',split:true,title:'West'"
		style="width: 150px; padding: 10px;">
		<ul id="tt"></ul> 
	</div>
	<div
		data-options="region:'east',split:true,collapsed:true,title:'East'"
		style="width: 100px; padding: 10px;">east region</div>
	<div data-options="region:'south',border:false"
		style="height: 50px; background: #A9FACD; padding: 10px;">南橙@qq.com.1648626203</div>
	<div data-options="region:'center',title:'Center'">
		<div class="easyui-tabs" style="width:700px;height:250px">
		<div title="About" style="padding:10px">
			<p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
			<ul>
				<li>easyui is a collection of user-interface plugin based on jQuery.</li>
				<li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
				<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
				<li>complete framework for HTML5 web page.</li>
				<li>easyui save your time and scales while developing your products.</li>
				<li>easyui is very easy but powerful.</li>
			</ul>
		</div>
		<div title="My Documents" style="padding:10px">
			<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul>
		</div>
		<div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
			This is the help content.
		</div>
	</div>
	</div>
</body>
</html>

代码复制好之后，我们就可以来看一下显示的一个效果：
在这里插入图片描述
当然这个是个死的选项卡哈，我们的重任就是把它“复活”。
开始操作吧：
将刚才的部分替换成下面这个部分：

//zouyan
<div id="bookTaps" class="easyui-tabs" style="width:500px;height:250px;">   //将width和height位置的数据调成100%，可以全屏center面板
    <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>

然后界面就会有三个选项卡显示：
在这里插入图片描述
其实很多网页的一个选项卡显示类型都是这样的，在生活中，大家可以多留意一些网页界面。
那么回到知识点，我们只需要一个选项卡，那就可以把另外的两个选项卡给去掉，也就是上面的代码，只需要复制这一段：

//zouyan
<div id="bookTaps" class="easyui-tabs" style="width:500px;height:250px;">   //将width和height位置的数据调成100%，可以全屏center面板
    <div title="首页" style="padding:20px;display:none;">   
       我是南橙，一个逐渐秃头的橙子Orange。   
    </div>    //可以根据自己的实际项目操作去增删选项卡
</div>

2、添加新的选项卡面板

1 add方法

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

一样的，我们来复制现成的代码，复制到index.js里面（因为我用来操作的界面是index.jsp）：

//zouyan    
$('#bookTaps').tabs('add',{  //add拓展下划  
    title:'New Tab',    
    content:'Tab Body',    
    closable:true,    
    tools:[{    
        iconCls:'icon-mini-refresh',    
        handler:function(){    
            alert('refresh');    
        }    
    }]    
});

add方法拓展

//方法参数：options
//添加一个新选项卡面板，选项参数是一个配置对象，查看选项卡面板属性的更多细节。在添加一个新选项卡面板的时候它将变成可选的。
//添加一个非选中状态的选项卡面板时，记得设置'selected'属性为false。
// 添加一个未选中状态的选项卡面板
$('#tt').tabs('add',{
	title: '新选项卡面板',
	selected: false
	//...
});

//（该功能自1.4.2版开始可用）// 在索引为2的位置上插入一个选项卡面板
$('#tt').tabs('add',{
	title: '插入的选项卡面板',
	index: 2
});

问题：目前呢，jsp中有一个静态的首页的选项卡tab，当浏览器请求jsp的时候，会调用下列代码，造成页面端看到两个tab页。
但是我们的需求是浏览器请求index.jsp，看到首页一个选项卡，当点击某一个树形菜单的一个元素，新增一个选项卡。
分析：选项卡的添加是与树形菜单点击想挂钩的。
所以我们看完方法之后就需要看事件了。

2 onClick事件

事件名：onClick
事件参数：node（很多事件的回调函数都包含'node'参数）
描述;在用户点击一个节点的时候触发。
代码示例： 
$('#tt').tree({
	onClick: function(node){
		alert(node.text);  // 在用户点击的时候提示
	}
});

看图将onClick那一小段复制过去（树形菜单参考项目示例）：
在这里插入图片描述
既然我们的需求是：看到首页一个选项卡，当点击某一个树形菜单的一个元素，新增一个选项卡。
那么我们就需要将下面的tab移到上面去，并且将里面的信息进行修改（比如title的信息修改）：

//zouyan
$(function(){
	$('#tt').tree({    
	    url:$("#ctx").val()+'/permission.action?methodName=menuTree'  ,
	    onClick: function(node){
    		alert(node.text);  // 在用户点击的时候提示
    		$('#bookTaps').tabs('add',{    
    		    title:node.text,    
    		    content:'Tab Body',    
    		    closable:true,    
    		    tools:[{    
    		        iconCls:'icon-mini-refresh',    
    		        handler:function(){    
    		            alert('refresh');    
    		        }    
    		    }]    
    		});
    	}
	}); 
})

记得在操作的时候要把tree菜单里面的菜单栏地址创建到jsp：
在这里插入图片描述
最终的代码是这样子的：

//zouyan
$(function(){
	var ctx = $("#ctx").val();
	$('#tt').tree({    
	    url:ctx+'/permission.action?methodName=menuTree'  ,
	    onClick: function(node){
//    		alert(node.text);  // 在用户点击的时候提示
	    	
	//    	<iframe scrolling="no" frameborder="0" src="" width="99%" height="99%"></iframe>
    		var content = '<iframe scrolling="no" frameborder="0" src="'+ctx+node.attributes.self.url+'" width="99%" height="99%"></iframe>';
	    	$('#bookTaps').tabs('add',{    
    		    title:'New Tab',    
    		    content:content,    
    		    closable:true,    
    		    tools:[{    
    		        iconCls:'icon-mini-refresh',    
    		        handler:function(){    
    		            alert('refresh');    
    		        }    
    		    }]    
    		});
    	}
	}); 
})