为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下数值型比较难点说明
Jun 07 Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
node.js中的fs.lstatSync方法使用说明
Dec 16 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
node.js命令行教程图文详解
May 27 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
Jul 16 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 Javascript
细说webpack6 Babel的使用详解
Sep 26 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
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
Javascript 继承机制实例
2009/08/12 Javascript
jquery 字符串切割函数substring的用法说明
2014/02/11 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
javascript实现微信分享
2014/12/23 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
[59:48]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第一场 1月26日
2021/03/11 DOTA
python opencv实现切变换 不裁减图片
2018/07/26 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
Python基础教程之异常详解
2019/01/10 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
CSS3的颜色渐变效果的示例代码
2017/09/29 HTML / CSS
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
温泉秘密:Onsen Secret
2020/07/06 全球购物
新闻学专业个人求职信写作
2014/02/04 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
年会主持词结束语
2014/03/27 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
2019学生会干事辞职信
2019/06/27 职场文书
JavaScript 原型与原型链详情
2021/11/02 Javascript
JavaScript parseInt0.0000005打印5原理解析
2022/07/23 Javascript