为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 相关文章推荐
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
Aug 09 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
Fixie.js 自动填充内容的插件
Jun 28 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
js获取浏览器基本信息大全
Nov 27 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
Apr 06 Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
Apr 30 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
德劲1103二次变频版的打磨
2021/03/02 无线电
基于pear auth实现登录验证
2010/02/26 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
js里的prototype使用示例
2010/11/19 Javascript
基于jQuery的倒计时插件代码
2011/05/07 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
vue二级路由设置方法
2018/02/09 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
2020/03/26 Javascript
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
python之yield表达式学习
2014/09/02 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
在Python中COM口的调用方法
2019/07/03 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
建筑设计所实习生自我鉴定
2013/09/25 职场文书
好矿嫂事迹材料
2014/01/21 职场文书
火锅店创业计划书范文
2014/02/02 职场文书
食品安全责任书
2014/04/15 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
珍爱生命主题班会
2015/08/13 职场文书
运动会广播稿200字
2015/08/19 职场文书
七夕情人节问候语
2015/11/11 职场文书
基于Redis的List实现特价商品列表功能
2021/08/30 Redis