easyUI实现选项卡及鼠标右键关闭
easyUI实现选项卡及手表右键关闭
- 前言
- Tabs（选项卡实现）
- 实现鼠标右键关闭选项卡
- 效果：
前言
前面分享了easyUI中Tree的前后端实现
Tree后端实现：后端实现
Tree前端实现:前端实现
Tabs（选项卡实现）
选项卡会显示一批面板，但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。
tabs的创建
相关的js代码
tabs的事件及方法
由于我们是加载数据库的数据，使用HTML代码如下
<div title="首页" style="padding:20px;display:none;">
这是首页
</div>
index:
<%@ 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/black/easyui.css">
<!-- 定义图标 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/black/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;">版权所有
</div>
<div data-options="region:'center',title:'Center'">
<div id="tabs" class="easyui-tabs" style="width:100%;height:100%;">
<div title="首页" style="padding:20px;display:none;">
这是首页
</div>
</div>
</div>
</body>
</html>
js代码部分
使用下面的js代码会有比较大的问题如：
1.点击左侧Tree，选项卡会进行重复，不会跳到已打开的选项卡上
2.点击左侧的非叶子节点，选项卡也会进行打开。非叶子节点被点击时，只会将下面的叶子节点进行展开，不会跳转页面
如图：
$(function(){
var lu=$("#ctx").val();
$('#tt').tree({
url:+lu+'/Permission.action?methodName=menuTree',
onClick: function(node){
var scr=lu+node.attributes.self.url;
var content = '';
$('#tabs').tabs('add',{
title:node.text,
content:content,
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert(node.text);
}
}]
});
}
});
})
使用我们使用下面的js代码:
$(function(){
var lu=$("#ctx").val();
$('#tt').tree({
url:+lu+'/Permission.action?methodName=menuTree',
onClick: function(node){
//判断当前是否存在对应的title选项卡，如果存在，就切换到对应的选项卡，如果不存在，就重新打开一个
/*console.log($('#tabs').tabs('exists',node.text));*/
if($('#tabs').tabs('exists',node.text)){
$('#tabs').tabs('select',node.text);
}else{
//判断是否是叶子节点
var scr=node.attributes.self.url;
if(scr==null){
}else{
//是叶子节点新增选项卡
var content = '';
$('#tabs').tabs('add',{
title:node.text,
content:content,
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert(node.text);
}
}]
});
}
}
}
});
})
已解决:
实现鼠标右键关闭选项卡
在网页中，一般选项卡都有鼠标点击右键关闭选项卡的功能如图：
easyUI事件：
实现鼠标右键步骤：
1.HTML部分
<!-- menu -->
<div id="mm" class="easyui-menu" style="width:120px;">
<div id="closeCurrent" name="closeCurrent" data-options="iconCls:'icon-no'">关闭当前</div>
<div id="closeOthers" name="closeOthers" data-options="iconCls:'icon-no'">关闭其它</div>
<div id="closeAll" name="closeAll" data-options="iconCls:'icon-cancel'">关闭所有</div>
</div>
2.写一个js方法关闭原有的鼠标右键事件：
$(function(){
//屏蔽右键菜单
$(document).bind("contextmenu",function(e){ return false; });
})
3.然后是js实现(首页默认打开不要关闭了)：
$(function() {
//生成tab标签
$('#tabs').tabs({
border : true,
/* onSelect : function(title) {
alert(title + ' is selected');
} */
});
//生成右键菜单
$('#tabs').tabs({
onContextMenu: function(e, title, index){
//选中标签
$('#tabs').tabs('select',index);
//显示右键菜单
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
}) ;
}
});
//为每个菜单绑定点击事件
//关闭选中的标签
$("#closeCurrent").click(function(){
//获取选中的标签索引
var tab = $('#tabs').tabs('getSelected');
var index = $('#tabs').tabs('getTabIndex',tab);
$("#tabs").tabs("close",index);
});
//关闭选中标签之外的标签
$("#closeOthers").click(function(){
//获取所有标签
var tabs = $("#tabs").tabs("tabs");
var length = tabs.length;
//获取选中标签的索引
var tab = $('#tabs').tabs('getSelected');
var index = $('#tabs').tabs('getTabIndex',tab);
//关闭选中标签之前的标签
for(var i=0;i<index;i++){
$("#tabs").tabs("close",1);
}
//关闭选中标签之后的标签
for(var i=0;i<length-index-1;i++){
$("#tabs").tabs("close",1);
}
});
//关闭所有标签
$("#closeAll").click(function(){
var tabs = $("#tabs").tabs("tabs");
var length = tabs.length;
for(var i=0;i<length;i++){
$("#tabs").tabs("close",1);
}
});
});
效果：
关闭所有：
