使用EasyUI实现动态tabs页签

xrz277

于 2020-08-06 11:39:18 发布

阅读量852

点赞数

分类专栏：前端文章标签： jquery 前端 easyui

本文链接：https://blog.youkuaiyun.com/FlyToMyHeart/article/details/107835079

版权

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用EasyUI实现动态Tabs功能，包括通过按钮添加链接并跳转至新页面、展示全部页签及按需展示特定页签的方法。通过实例代码展示了如何根据参数确定展示的页签，并处理页签过多时的自动隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：需要实现一个动态tabs的功能。具体要求：在首页可以通过鼠标点击进入具体的一个页签，另外首页还有一个动态按钮是展示全部的页签。当显示全部页签的时候，由于窗口大小需要把多余的页签隐藏。首页还有一个动作按钮是可以只展示出“未配置”的页签，相当于需要展示出的页签（不是全部）。

需求如上，经过一番研究吧，最后发现EasyUI可以实现这个功能。

EasyUI Demo如下，贴出主要代码：

<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/icon.css">
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/jquery.easyui.min.js"></script>
	<script>
		function addTab(title, url){
			if ($('#tt').tabs('exists', title)){
				$('#tt').tabs('select', title);
			} else {
				var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
				$('#tt').tabs('add',{
					title:title,
					content:content,
					closable:true
				});
			}
		}
	</script>
</head>
<body>
	<div style="margin-bottom:10px">
		<a href="#" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')">google</a>
		<a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')">jquery</a>
		<a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://jeasyui.com/')">easyui</a>
	</div>
	<div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
		<div title="Home">
		</div>
	</div>
</body>

根据需求的功能，再次基础上进行扩展。

第一个功能：按钮添加链接，跳转至新页面，同时传递参数tableName，新页面初始化时，根据参数tableName，确定要展示的页签tab

$(document).ready(function (){
    var tableName = $("#tableName").val();
    if(tableName == 'baidu'){
        $('#tt').tabs('exists', "百度");
        $('#tt').tabs('select', "百度");
        url = "<%=path%>/queryAction.do?action=getInfo&tableName=baidu";
        var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
        $('#tt').tabs('add',{
			title:"百度",
			content:content,
			closable:true
		});
    }
}


<body>
	<input id="tableName" type="hidden" value='<c:out value="${tableName }"></c:out>'>
	<div id="tt" class="easyui-tabs">
	</div>
</body>

第二个功能：当需要展示全部页签的时候，tableName传值为“all”

if(tableName == "all"){
				$.ajax({
				type: "post",
				url: "queryAction.do?action=getInfos",
				success: function(result){
					var json = eval(result);
					$.each(json, function (index, item) {
		                 //循环获取数据  
		                 if(json[index] == 'baidu'){
		                 	$('#tt').tabs('exists', "百度");
		                 	$('#tt').tabs('select', "百度");
		                 	url = "<%=path%>/queryAction.do?action=getInfo&tableName=baidu";
		                 	var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
		                 	$('#tt').tabs('add',{
								title:"百度",
								content:content,
								closable:true
							});
		                 }
		                 if(json[index] == 'guge'){
		                 	$('#tt').tabs('exists', "谷歌");
		                 	$('#tt').tabs('select', "谷歌");
		                 	url = "<%=path%>/queryAction.do?action=getInfo&tableName=guge";
		                 	var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
		                 	$('#tt').tabs('add',{
								title:"谷歌",
								content:content,
								closable:true
							});
		                 }

<body>
	<input id="tableName" type="hidden" value='<c:out value="${tableName }"></c:out>'>
	<div id="tt" class="easyui-tabs">
	</div>
</body>

当页签特别多时会自动隐藏，可以通过滑动来显示。

第三个功能：展示我们需要的，其实和第二段代码一样，只需要换个方法，从数据库获取到我们需要的数据，遍历即可。