为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 相关文章推荐
event.srcElement+表格应用
Aug 29 Javascript
用javascript getComputedStyle获取和设置style的原理
Oct 10 Javascript
jQuery Ajax 全解析
Feb 08 Javascript
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
Vue formData实现图片上传
Aug 20 Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 Javascript
解决vue组件销毁之后计时器继续执行的问题
Jul 21 Javascript
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
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判断服务器是否是HTTPS连接
2013/07/05 PHP
php metaphone()函数及php localeconv() 函数实例解析
2016/05/15 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
jquery ajax执行后台方法
2010/03/18 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
javascript常用的方法分享
2015/07/01 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
Apache如何部署django项目
2017/05/21 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
舞蹈教育学专业推荐信
2013/11/27 职场文书
如何写你的创业计划书
2014/01/07 职场文书
主题婚礼策划方案
2014/02/10 职场文书
美术教师自我鉴定
2014/02/12 职场文书
年会主持词结束语
2014/03/27 职场文书
保密承诺书范文
2014/03/27 职场文书
煤矿安全生产标语
2014/06/06 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
担保贷款承诺书
2015/04/30 职场文书
标枪加油稿
2015/07/22 职场文书
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python