jQuery Easyui tabs组件

最新推荐文章于 2024-03-09 15:45:51 发布

╰烟消云散

最新推荐文章于 2024-03-09 15:45:51 发布

阅读量575

点赞数 1

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

本文链接：https://blog.csdn.net/qq_45384482/article/details/106935938

版权

easyui 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

选项卡的使用

当用户不需要同时看到多个选项标签中的内容时，这个时候我们就可以用选项卡组件了。

关于选项卡的使用，官方文档提供很多的使用方法及帮助，我们主要围绕官方文档来进行开发。
在这里插入图片描述

1.html中使用

我们只需要引入代码，它就会生成tabs页这种写的比较死，我们需要的是点击菜单去打开不同的菜单页和对于的内容。
在这里插入图片描述

动态加载选项卡

1.新增tabs

因为我们需要点击菜单去加载并打开对应的tabs页，这需要去配合tree控件的函数来实现，如果对tree组件不理解的话可以看一下博主这一篇博文：Tree组件。
这是文档中提供的增加tabs方法：
在这里插入图片描述
这个的话只是单纯的加载浏览器jquery执行的时候生成的一个选项卡，暂时只需要关注两个属性就ok了，让它变成我们点击菜单的时候显示对应标题和对应内容的话需要放入到树控件的函数中。

1.tiltle标题

2.content内容

在这里插入图片描述

2.配合Tree控件

树控件的话是从数据库获取到值展示菜单的，它里面有一个onclick的点击属性，
我们可以拿到返回值配合iframe标签来实现动态加载tabs页。

但是会存在两个bug
第一个：重复打开选项卡
第二个：可以打开非叶子节点（非叶子节点是不能打开的）

我们利用了官方提供的两个方法完美的解决掉了。

1.判断是否存在,如果存在就切换

$('#tabled').tabs('exists',node.text)；
$('#tabled').tabs('select',node.text)

2.获取属性中的跳转地址，如果有就进行内嵌

var src=node.attributes.self.menuURL;

具体js：

$(function(){
var ctx=$("#ctx" ).val();
	$('#tt').tree({
		//这是请求路径
		url:ctx+'/menu.action?methodName=menuNodes' ,
		onClick: function(node){
		//debugger;
//			存在的问题，重复的table页打开、
//			处理思路：判断当前是否存在对应的title的选项卡、
//			如果存在就切换到对应的选项卡
//			如果不存在就打开新的选项卡
           if($('#tabled').tabs('exists',node.text)){
//        	   切换选项卡
        	   $('#tabled').tabs('select',node.text);
           }else{
//        	   新增选项卡
//        	   存在问题，非叶子节点是不能打开页面的
        	  var src=node.attributes.self.menuURL;
        	  if(src){
        		  var content='<iframe scrolling="no" frameborder="0" src="'+ctx+src+'" width="99%" height="99%"></iframe>';	
         			$('#tabled').tabs('add',{    
         			    title:node.text,    
         			    content:content,    
         			    closable:true,    
         			    tools:[{    
         			        iconCls:'icon-mini-refresh',    
         			        handler:function(){    
         			            alert('refresh');    
         			        }    
         			    }]    
         			});   
        	  }
           }
		}

	});
})

3.实现原理

点击菜单应该要进行jsp界面的内嵌，我们需要获取对应的路径它存在数据库中，我们eclipse就要建立对应的jsp路径。

数据库：
财务：是非叶子节点是不能进行打开的
用户权限管理：是叶子节点也就是菜单子项，打开的内容就是url的界面内容。
在这里插入图片描述 项目中对应路径：

我们可以在js哪里debugger按f12进行前端断点测试，查看对应的值。

这里我们可以透析到tree的加载函数返回值中url的路径刚好是我们项目中jsp文件的路径它可以直接进行内嵌，以及我们还可以其他的值。
在这里插入图片描述
效果图：

jsp界面。
在这里插入图片描述
选项卡的对应内容显示。

鼠标右键关闭标签，全部/其他

这里的话主要还是依赖官方文档提供的方法。

在这里插入图片描述
js代码：

//  选项卡 右键 
	$('#tabled').bind('contextmenu',function(e){         
        e.preventDefault(); 
//        显示对应id的内容展示
           $('#mymenu').menu('show', {  
//        	   设置展示的坐标
               left: e.pageX,  
               top: e.pageY  
           });  
       });  	
	  //关闭所有选项卡  
   $("#closeall").bind("click",function(){  
       //获取所有的标签
       var tags=$('#tabled').tabs('tabs');
		/**
		  如果使用加的话 每次 加1 length -1 会造成 有些减不掉
		  所以删除 只能从长度开始删，删一次长度减一次
		**/
		for ( var i = tags.length-1; i >= 1; i--) {
//			关闭所有的
			$('#tabled').tabs('close',i);
		}
   });  
   //关闭其他选项卡
    $("#closeelse").bind("click",function(){  
   	//获取所有的tag
        var tags=$('#tabled').tabs('tabs');
        //获取当前的标签
		 var tag=$('#tabled').tabs('getSelected');
		 //获取标签所在的index;
		 var index=$('#tabled').tabs('getTabIndex',tag);
		 for ( var i = tags.length-1; i >= 1; i--) {
			if(index == i){
//				如果下标是当前选项卡的话就跳过
				continue;
			}
			$('#tabled').tabs('close',i);
		 }
    });

jsp界面的代码：


<body class="easyui-layout">
	<input type="hidden" id="ctx"
		value="${pageContext.request.contextPath }">

	<!-- 头部 -->
	<div data-options="region:'north',border:false"
		style="height: 60px; background: #B3DFDA; padding: 10px">我是上面</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;">我是右边</div>
	<!-- 底部权限 -->
	<div data-options="region:'south',border:false"
		style="height: 50px; background: #A9FACD; padding: 10px;">我是底部</div>
	<div data-options="region:'center',title:'Center'">

		<div id="tabled" class="easyui-tabs"
			style="width: 100%; height: 100%;">
			<div title="首页" style="padding: 20px; display: none;">
				1111111111111</div>
		</div>
	</div>

<!-- 右击时的选项 -->
	<span >
		<div id="mymenu" class="easyui-menu">
			<div id="closeall">关闭全部</div>
			<div id="closeelse">关闭其他</div>
		</div>
	</span>
</body>