为jQuery-easyui的tab组件添加右键菜单功能的简单实例


Posted in Javascript onOctober 10, 2016

加入了右击TAB选项卡时显示关闭的上下文菜单

具体实现代码:

右键菜单 HTML:

<div id="mm" class="easyui-menu" style="width:150px;">
     <div id="mm-tabclose">关闭</div>
     <div id="mm-tabcloseall">全部关闭</div>
     <div id="mm-tabcloseother">除此之外全部关闭</div>
     <div class="menu-sep"></div>
     <div id="mm-tabcloseright">当前页右侧全部关闭</div>
     <div id="mm-tabcloseleft">当前页左侧全部关闭</div>
     
 </div>

下面是js代码:

$(function(){
 tabClose();
   tabCloseEven();
 })
 
function tabClose()
 {
   /*双击关闭TAB选项卡*/
   $(".tabs-inner").dblclick(function(){
     var subtitle = $(this).children("span").text();
     $('#tabs').tabs('close',subtitle);
   })
 
  $(".tabs-inner").bind('contextmenu',function(e){
     $('#mm').menu('show', {
       left: e.pageX,
       top: e.pageY,
     });
     
     var subtitle =$(this).children("span").text();
     $('#mm').data("currtab",subtitle);
     
     return false;
   });
 }
 //绑定右键菜单事件
 function tabCloseEven()
 {
   //关闭当前
   $('#mm-tabclose').click(function(){
     var currtab_title = $('#mm').data("currtab");
     $('#tabs').tabs('close',currtab_title);
   })
   //全部关闭
   $('#mm-tabcloseall').click(function(){
     $('.tabs-inner span').each(function(i,n){
       var t = $(n).text();
       $('#tabs').tabs('close',t);
     });  
   });
   //关闭除当前之外的TAB
   $('#mm-tabcloseother').click(function(){
     var currtab_title = $('#mm').data("currtab");
     $('.tabs-inner span').each(function(i,n){
       var t = $(n).text();
       if(t!=currtab_title)
         $('#tabs').tabs('close',t);
     });  
   });

   //关闭当前右侧的TAB
   $('#mm-tabcloseright').click(function(){
     var nextall = $('.tabs-selected').nextAll();
     if(nextall.length==0){
       //msgShow('系统提示','后边没有啦~~','error');
       alert('后边没有啦~~');
       return false;
     }
     nextall.each(function(i,n){
       var t=$('a:eq(0) span',$(n)).text();
       $('#tabs').tabs('close',t);
     });
     return false;
   });
   //关闭当前左侧的TAB
   $('#mm-tabcloseleft').click(function(){
     var prevall = $('.tabs-selected').prevAll();
     if(prevall.length==0){
       alert('到头了,前边没有啦~~');
       return false;
     }
     prevall.each(function(i,n){
       var t=$('a:eq(0) span',$(n)).text();
       $('#tabs').tabs('close',t);
     });
     return false;
   });
 }

以上就是小编为大家带来的为jQuery-easyui的tab组件添加右键菜单功能的简单实例全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
JavaScript在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
YUI的Tab切换实现代码
Apr 11 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
一个可复用的vue分页组件
May 15 Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 Javascript
原生js实现放大镜组件
Jan 22 Javascript
微信小程序实现拍照和相册选取图片
May 09 Javascript
Javascript生成带参数的二维码示例
Oct 10 #Javascript
详细讲解JavaScript中的this绑定
Oct 10 #Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 #Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 #Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
Oct 09 #Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 #Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 #Javascript
You might like
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
让PHP开发者事半功倍的十大技巧小结
2010/04/20 PHP
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
AngularJs Modules详解及示例代码
2016/09/01 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
Python的Django框架使用入门指引
2015/04/15 Python
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
linux面试题参考答案(5)
2014/09/01 面试题
运动会广播稿200米
2014/01/27 职场文书
运动会入场口号
2014/06/07 职场文书
感恩教育月活动总结
2014/07/07 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
三人合伙协议书范本
2014/10/29 职场文书
优秀教研组申报材料
2014/12/26 职场文书
小学运动会开幕词
2015/01/28 职场文书
公司催款律师函
2015/05/27 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
只用Python就可以制作的简单词云
2021/06/07 Python
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫