编程 Javascript

jQuery EasyUI右键菜单实现关闭标签/选项卡

Posted in Javascript onOctober 10, 2016

本文实例为大家分享了jQuery EasyUI右键菜单可以选择关闭标签/选项卡操作，供大家参考，具体内容如下

目录结构：

noContextMenu.js 文件内容如下：

$(function(){
 //屏蔽右键菜单
 $(document).bind("contextmenu", function(e){ return false; });
});

效果图：

jQuery EasyUI右键菜单实现关闭标签/选项卡

方式一：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>easyui右键菜单-关闭标签方式一</title>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/jquery-easyui-1.3.5/themes/default/easyui.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/jquery-easyui-1.3.5/themes/icon.css" />
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/noContextMenu.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery-easyui-1.3.5/jquery.easyui.min.js"></script>

<script type="text/javascript">
 $(function() {

  //生成tab标签
  $('#tt').tabs({
   border : true,
   /* onSelect : function(title) {
    alert(title + ' is selected');
   } */
  });

   //生成右键菜单 
   $('#tt').tabs({
    onContextMenu: function(e, title, index){
    //选中标签
    $('#tt').tabs('select',index);
    //显示右键菜单
    $('#mm').menu('show', {
     left: e.pageX,
     top: e.pageY
    }) ;
    }
   });
   
   //为每个菜单绑定点击事件
   //关闭选中的标签
   $("#closeCurrent").click(function(){
    //获取选中的标签索引
    var tab = $('#tt').tabs('getSelected');
    var index = $('#tt').tabs('getTabIndex',tab);
    $("#tt").tabs("close",index);
   });
   //关闭选中标签之外的标签
   $("#closeOthers").click(function(){
    //获取所有标签
    var tabs = $("#tt").tabs("tabs");
    var length = tabs.length;
    //获取选中标签的索引
    var tab = $('#tt').tabs('getSelected');
    var index = $('#tt').tabs('getTabIndex',tab);
    //关闭选中标签之前的标签
    for(var i=0;i<index;i++){
    $("#tt").tabs("close",0);
    }
    //关闭选中标签之后的标签
    for(var i=0;i<length-index-1;i++){
     $("#tt").tabs("close",1);
    }
   });
   //关闭所有标签
   $("#closeAll").click(function(){
    var tabs = $("#tt").tabs("tabs");
    var length = tabs.length;
    for(var i=0;i<length;i++){
     $("#tt").tabs("close",0);
    }
   });
  
 });
 
</script>
</head>

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

 <!-- tabs -->
 <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
  <div title="Tab1" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab1</div>
  <div title="Tab2" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab2</div>
  <div title="Tab3" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab3</div>
 </div>
</body>
</html>

方式二：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>easyui右键菜单-关闭标签方式二</title>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/jquery-easyui-1.3.5/themes/default/easyui.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/jquery-easyui-1.3.5/themes/icon.css" />
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-migrate-1.2.1.min.js"></script>
<%-- <script type="text/javascript" src="${pageContext.request.contextPath }/js/noContextMenu.js"></script> --%>
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery-easyui-1.3.5/jquery.easyui.min.js"></script>

<script type="text/javascript">
 $(function() {
  //生成tab标签
  $('#tt').tabs({
   border : true,
   /* onSelect : function(title) {
    alert(title + ' is selected');
   } */
  });
  
  //生成右键菜单 
   $('#tt').tabs({
    onContextMenu: function(e, title, index){
     //让默认事件失效
     e.preventDefault() ;
     //选中标签
     //$('#tt').tabs('select',title);
     $('#tt').tabs('select',index);
     //显示右键菜单
    $('#mm').menu('show', {
     left: e.pageX,
     top: e.pageY
    });
    $("#mm").menu({
      onClick : function (item) {
       /* alert(item.name);
       alert(typeof this) ; */
      closeTab(this, item.name);
      }
    });
    }
   });
   
 });
 
 //关闭标签的方法
 var closeTab = function(type,menuName){
  if(menuName == "closeCurrent"){
   //获取选中的标签索引
    var tab = $('#tt').tabs('getSelected');
    var index = $('#tt').tabs('getTabIndex',tab);
    $("#tt").tabs("close",index);
  }else if(menuName == "closeOthers"){
   //获取所有标签
    var tabs = $("#tt").tabs("tabs");
    var length = tabs.length;
    //获取选中标签的索引
    var tab = $('#tt').tabs('getSelected');
    var index = $('#tt').tabs('getTabIndex',tab);
    //关闭选中标签之前的标签
    for(var i=0;i<index;i++){
    $("#tt").tabs("close",0);
    }
    //关闭选中标签之后的标签
    for(var i=0;i<length-index-1;i++){
     $("#tt").tabs("close",1);
    }
  }else if(menuName == "closeAll"){
   var tabs = $("#tt").tabs("tabs");
    var length = tabs.length;
    for(var i=0;i<length;i++){
     $("#tt").tabs("close",0);
    }
  } 
 } ;
 
</script>
</head>

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

 <!-- tabs -->
 <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
  <div title="Tab1" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab1</div>
  <div title="Tab2" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab2</div>
  <div title="Tab3" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab3</div>
 </div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

jQuery EasyUI右键菜单实现关闭标签/选项卡

- Author -

冷月葬残花

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery的live使用注意事项

Feb 18 Javascript

在JavaScript的正则表达式中使用exec()方法

Jun 16 Javascript

jQuery实现商品活动倒计时

Oct 16 Javascript

一不小心就做错的JS闭包面试题

Nov 25 Javascript

Fullpage.js固定导航栏-实现定位导航栏

Mar 17 Javascript

JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)

Jun 16 Javascript

javascript验证内容为数字以及长度为10的简单实例

Aug 20 Javascript

jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例

Oct 10 Javascript

Bootstrap table两种分页示例

Dec 23 Javascript

使用socket.io实现简单聊天室案例

Jan 02 Javascript

微信小程序实现评论功能

Nov 28 Javascript

详解JavaScript执行模型

Nov 16 Javascript

JavaScript 判断一个对象{}是否为空对象的简单方法

Oct 09 #Javascript

细数JavaScript 一个等号,两个等号,三个等号的区别

Oct 09 #Javascript

JS获取IE版本号与HTML设置IE文档模式的方法

Oct 09 #Javascript

js实现弹窗居中的简单实例

Oct 09 #Javascript

老生常谈Javascript中的原型和this指针

Oct 09 #Javascript

浅谈Javascript中的函数、this以及原型

Oct 09 #Javascript

常用Javascript函数与原型功能收藏(必看篇)

Oct 09 #Javascript

You might like

php xml文件操作代码（一）

2009/03/20 PHP

php实现从上传文件创建缩略图的方法

2015/04/02 PHP

JQUERY复选框CHECKBOX全选,取消全选

2008/08/30 Javascript

jquery miniui 教程表格控件合并单元格应用

2012/11/25 Javascript

基于jquery实现点击左右按钮图片横向滚动

2013/04/11 Javascript

js判断undefined变量类型使用typeof

2013/06/03 Javascript

js调试系列源码定位与调试[基础篇]

2014/06/18 Javascript

深入浅析JavaScript面向对象和原型函数

2016/02/06 Javascript

AngularJS中实现用户访问的身份认证和表单验证功能

2016/04/21 Javascript

微信小程序 rpx 尺寸单位详细介绍

2016/10/13 Javascript

bootstrap多种样式进度条展示

2016/12/20 Javascript

在点击div中的p时，如何阻止事件冒泡

2017/02/07 Javascript

webpack配置文件和常用配置项介绍

2017/04/28 Javascript

AngularJS通过ng-Img-Crop实现头像截取的示例

2017/08/17 Javascript

bootstrap table实现点击翻页功能可记录上下页选中的行

2017/09/28 Javascript

Vue实现表格批量审核功能实例代码

2019/05/28 Javascript

使用axios发送post请求,将JSON数据改为form类型的示例

2019/10/31 Javascript

es6函数之严格模式用法实例分析

2020/03/17 Javascript

vue-cli3项目打包后自动化部署到服务器的方法

2020/09/16 Javascript

Vue Element校验validate的实例

2020/09/21 Javascript

如何使用gpu.js改善JavaScript的性能

2020/12/01 Javascript

Python时间的精准正则匹配方法分析

2017/08/17 Python

Python+request+unittest实现接口测试框架集成实例

2018/03/16 Python

numpy中loadtxt 的用法详解

2018/08/03 Python

Python判断telnet通不通的实例

2019/01/26 Python

Python实现树莓派摄像头持续录像并传送到主机的步骤

2020/11/30 Python

创造美妙香氛体验：Aera扩散器和香水

2018/11/25 全球购物

Java面试题：Java类的Main方法如果是Private将会怎么样

2016/08/18 面试题

大学生求职简历的自我评价

2013/10/14 职场文书

自我评价范文

2013/12/22 职场文书

公司总经理岗位职责

2014/03/15 职场文书

一份文言文检讨书

2014/09/13 职场文书

美术教师个人工作总结

2015/02/06 职场文书

学雷锋团日活动总结

2015/05/06 职场文书

虚拟机linux端mysql数据库无法远程访问的解决办法

2021/05/26 MySQL

Mysql实现主从配置和多主多从配置

2021/06/02 MySQL