首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onOctober 10, 2016

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

目录结构：

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 回车事件实现代码
Aug 23 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
Javascript 计算字符串在localStorage中所占字节数
Oct 21 Javascript
AngularJS 最常用的功能汇总
Feb 17 Javascript
canvas仿iwatch时钟效果
Mar 06 Javascript
vue2 中如何实现动态表单增删改查实例
Jun 09 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
node.js的http.createServer过程深入解析
Jun 06 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
Aug 23 Javascript
详解JS WebSocket断开原因和心跳机制
May 07 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
http_stub_status_module(1) location(2) 区块链(2) 双向链表(6) zabbix(9) 缓存机制(1) keeplive_timeout(1) text-shadow(1) TypeScript(2) RTMP(1)
You might like
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
PHP数组操作类实例
2015/07/11 PHP
php实现zip文件解压操作
2015/11/03 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
再论Javascript的类继承
2011/03/05 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
Python lambda和Python def区别分析
2014/11/30 Python
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
python使用fork实现守护进程的方法
2017/11/16 Python
Python使用Scrapy保存控制台信息到文本解析
2017/12/27 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
Python龙贝格法求积分实例
2020/02/29 Python
Python面向对象实现方法总结
2020/08/12 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
粉红色的鲸鱼：Vineyard Vines
2018/02/17 全球购物
巴西香水和化妆品购物网站：The Beauty Box
2019/09/03 全球购物
法学专业个人求职信
2013/09/26 职场文书
大学毕业登记表自我鉴定
2013/10/09 职场文书
技术总监的工作职责
2013/11/13 职场文书
三个儿子教学反思
2014/02/03 职场文书
委托书怎么写
2014/07/31 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python
详解python的异常捕获
2022/03/03 Python
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang
一文搞懂Redis中String数据类型
2022/04/03 Redis