为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 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
JavaScript实现页面实时显示当前时间的简单实例
Jul 20 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
深入理解Angular中的依赖注入
Jun 26 Javascript
vue.js学习之vue-cli定制脚手架详解
Jul 02 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
this.$toast() 了解一下?
Apr 18 Javascript
Vue登录主页动态背景短视频制作
Sep 21 Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 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 Socket 编程模拟Http post和get请求
2014/11/25 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
php经典趣味算法实例代码
2020/01/21 PHP
JavaScript关于select的相关操作说明
2010/01/13 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
动态添加option及createElement使用示例
2014/01/26 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
使用Python实现一个简单的项目监控
2015/03/31 Python
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
python缩进长度是否统一
2020/08/02 Python
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
2015年文明创建工作总结
2015/04/30 职场文书
廉洁自律证明
2015/06/24 职场文书
2015年学校办公室主任工作总结
2015/07/20 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
如何用六步教会你使用python爬虫爬取数据
2022/04/06 Python