easyuiTabs组件

最新推荐文章于 2020-06-28 16:51:29 发布

Sinner°

最新推荐文章于 2020-06-28 16:51:29 发布

阅读量211

点赞数

文章标签： easyui

本文链接：https://blog.csdn.net/m0_46890027/article/details/106988004

版权

本文介绍了easyUI的tabs选项卡，包括官方文档的简介和demo示例。对比了通过HTML标签和JavaScript创建选项卡的方式，重点讲述了如何使用JavaScript动态创建，避免了jsp代码的冗余。示例中展示了动态加载数据时的处理方法，如检查并切换已存在的选项卡，以及处理非叶子节点的逻辑。

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

tabs选项卡简介：

1.从easyUI官方文档入手，找到tabs选项卡的简介以及查看demo示例

2.使用案例 (两种方式,为了实现动态的选项卡从数据库拿值，为了更方便我们使用第二种方式)

1.通过标签创建选项卡(静态html，对于加载动态的数据不方便)

通过标签可以更容易的创建选项卡，我们不需要写任何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>

2.通过Javascript创建选项卡(更灵活，框架帮我们写好的)

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

实现选项卡案例：

静态jsp代码：

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

效果图：

总结：jsp代码过多，繁杂冗余

动态jsp代码：

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">   
    <div title="Tab1" style="padding:20px;display:none;">   
        tab1    
    </div>   
</div>

js代码：

$(function(){
$('#tt').tabs({    
    border:false,    
    onSelect:function(title){    
        alert(title+' is selected');    
    }    
}); 
$('#tt').tabs('add',{    
    title:'New Tab',    
    content:'Tab Body',    
    closable:true,    
    tools:[{    
        iconCls:'icon-mini-refresh',    
        handler:function(){    
            alert('refresh');    
        }    
    }]    
});   
})

效果图：

每次刷新会出现一个new Tab界面：

判断是否存在相同的选项卡，如果存在就切换到对应的选项卡，如果不存在就打开一个

非叶子节点（当url为空）按开发角度来说是不能打开页面的：

$(function(){
	var ctx=$("#ctx").val();
	$('#tt').tree({    
	    url:ctx+'/permission.action?methodName=menuTree',
	    onClick: function(node){
//			alert(node.text);  // 在用户点击的时候提示
			//目前问题：相同的tab页反复打开
			//判断是否存在相同的选项卡，如果存在就切换到对应的选项卡，如果不存在就打开一个
	    	if($('#bookTabs').tabs('exists',node.text)){
//	    		切換選項卡
	    		$('#bookTabs').tabs('select',node.text);
	    	}else{//新增選項卡
	    	//非叶子节点（当url为空）按开发角度来说是不能打开页面的
	    		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');     
			    	        }    
			    	    }]    
			    	});  
	    		}
	    		
	    	}
	    	
		}
	});  
	$('#bookTabs').bind('contextmenu',
    		function(e) {
			e.preventDefault();
			$('#mymenu').menu('show', {
						left : e.pageX,
						top : e.pageY
			             			});
					   });
	//关闭所有标签页
	$('#closeAll').bind("click",function(){
		var tablist = $('#bookTabs').tabs('bookTabs');//获取所有选项卡的面板
		for(var i=tablist.length-1;i>=0;i--){
			$('#bookTabs').tabs('close',i);//循环将它们都关了
		}
	});
	
})

效果图：