tab选项卡实现思路以及选项卡的右击菜单

标签: js  tab  easyui  html

tree组件加上tab选项卡

前言

之前的博客讲过了MySQL+mvc实现动态的tree组件,这次,我们来讲讲点击tree的叶子节点后出现的选项卡效果如何实现。

(用之前讲述tree的话来说,叶子节点就是辈分最小的一个)

实现

首先看看实现效果:
在这里插入图片描述
首先,我们思考,我们一般进入类似的界面,都是有一个默认打开的首页界面,所以我们需要在jsp界面写一个easyUI中的选项卡组件:

  <div id="tabs" class="easyui-tabs" style="width:100%;height:100%;">   
	 <div   title="首页" style="padding:20px;display:none;">   
		首页一般在后台管理,放各种数据指标(各个模块的使用情况、数据量、报表)   
		
		//这个菜单是用来做右击菜单的
		<div id="rcmenu" class="easyui-menu" style="">
		<div data-options="iconCls:'icon-cancel'" id="closecur">
			关闭
		</div>
		
		<div id="closeall">
			关闭全部
		</div>
		
		<div id="closeother">
			关闭其他
		</div>
		
		<div class="menu-sep"></div>
			<div id="closeright">
				关闭右侧标签页
			</div>
			
			<div id="closeleft">
				关闭左侧标签页
			</div>
		</div>
		
	 </div>  
</div>  

然后我们的需求是:点击左侧tree的叶子节点时,需要新增一个选项卡那么在js代码中我们需要为tree增加点击事件

而在新增选项卡的时候,我们需要考虑会遇到的问题:

关于该节点对应的选项卡已打开?

那么我们点击该节点时是不需要新增选项卡的,而是切换选项卡至节点对应的选项卡。

关于非叶子节点不需要打开新的选项卡的问题

由于我做的tree中的数据来自于数据库,在设计数据库的时候,叶子节点是有路径的,即点击时打开的面板对应的页面的路径,所以,在数据库中非叶子节点是不存在路径的,我们可以直接用路径判断,如果是空的就不需要新增选项卡。

在这里插入图片描述

$(function(){
	$('#tt').tree({
			url:$('#ctx').val()+ '/menu.action?methodName=menuTree',
				onClick: function(node){
				//判断节点对应的选项卡是否存在
					if($('#tabs').tabs('exists',node.text)){//返回的是boolean类型的值
						//切换选项卡
						$('#tabs').tabs('select',node.text);
					} else{
						//新增选项卡
						var  src=node.attributes.self.menuURL;
						if(src){
							var content='<iframe scrolling="no" frameborder="0" src="'+src+'" width="99%" height="99%"></iframe>';
							$('#tabs').tabs('add',{    
							    title:node.text,    
							    content:content,    
							    closable:true,    
							    tools:[{    
							        iconCls:'icon-mini-refresh',    
							        handler:function(){    
							            alert('refresh');    
							        }    
							    }]    
							});  
						}
					}
				}
	});

	
	//展示右击菜单
	$('.tabs-header').bind('contextmenu',function(e){
		e.preventDefault();
		$('#rcmenu').menu('show', {
			left: e.pageX,
			top: e.pageY
		});
	});
	//关闭当前标签页
	$('#closecur').bind("click",function(){
		var tab = $('#tabs').tabs('getSelected');//获取选择的选项卡
		var index = $('#tabs').tabs('getTabIndex',tab);//获取该选项卡的索引
		$('#tabs').tabs('close',index);//将它关闭
	});
	//关闭所有标签页
	$('#closeall').bind("click",function(){
		var tablist = $('#tabs').tabs('tabs');//获取所有选项卡的面板
		for(var i=tablist.length-1;i>=0;i--){
			$('#tabs').tabs('close',i);//循环将它们都关了
		}
	});
	//关闭非当前标签页(先关闭右侧,再关闭左侧)//
	$("#closeother").bind("click",function(){
		var tablist = $('#tabs').tabs('tabs');
		var tab = $('#tabs').tabs('getSelected');
		var index = $('#tabs').tabs('getTabIndex',tab);
		for(var i=tablist.length-1;i>index;i--){
			$('#tabs').tabs('close',i);
		}
		var num = index-1;
		for(var i=num;i>=0;i--){
			$('#tabs').tabs('close',0);
		}
	});
	//关闭当前标签页右侧标签页
	$("#closeright").bind("click",function(){
		var tablist = $('#tabs').tabs('tabs');
		var tab = $('#tabs').tabs('getSelected');
		var index = $('#tabs').tabs('getTabIndex',tab);
		for(var i=tablist.length-1;i>index;i--){//循环从后面开始关闭,根据条件到自己的时候结束
			$('#tabs').tabs('close',i);
		}
	});
	//关闭当前标签页左侧标签页
	$("#closeleft").bind("click",function(){
		var tab = $('#tabs').tabs('getSelected');
		var index = $('#tabs').tabs('getTabIndex',tab);
		var num = index-1;
		for(var i=0;i<=num;i++){
			$('#tabs').tabs('close',0);//一直删除第一个到自己结束
		}
	});

	
})

选项卡的右击菜单需要的js代码就是上面这部分。

这是效果:
在这里插入图片描述

总结

冲鸭冲鸭,有问题欢迎留言,看到都会回哦!

版权声明:本文为JiangHu_Java原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/JiangHu_Java/article/details/106931618