jQuery EasyUI实现右键菜单变灰不可用效果


Posted in Javascript onSeptember 24, 2015

首先,实现“除此之外全部关闭”变灰不可用。

当只打开一个Tab选项卡时,右键菜单里“除此之外全部关闭”就应该变灰不可用,这样可以提示用户没有除这一个选项卡没有其他的选项卡了。程序实现很简单了,只要获得打开Tab选项卡的个数,如果个数为1,那么就把“除此之外全部关闭”变灰不可用就行了。

var tabcount = $('#tabs').tabs('tabs').length; //tab选项卡的个数 
  if (tabcount <= 1) { 
    $('#mm-tabcloseother').attr("disabled", "disabled").css({ "cursor": "default", "opacity": "0.4" }); 
  } 
  else { 
    $('#mm-tabcloseother').removeAttr("disabled").css({ "cursor": "pointer", "opacity": "1" }); 
  }

说明:在Firfox,Google,Opera浏览器里,“disabled”的属性不起作用,所以我加了一个CSS样式,设置了一下它的透明度使它变灰。

效果图:

jQuery EasyUI实现右键菜单变灰不可用效果

图一:除此之外全部关闭

第二,实现“当前页右侧全部关闭”变灰不可用。

当一个Tab选项卡的右侧没有选项卡的时候,这个Tab选项卡就应该变灰不可用。程序实现也不难,只要获得最后一个Tab选项卡的标题和当前右键菜单所在的Tab选项卡的标题进行比较,如果一致,就把“当前页右侧全部关闭”变灰不可用。

var tabs = $('#tabs').tabs('tabs');   //获得所有的Tab选项卡 
var tabcount = tabs.length; //Tab选项卡的个数 
var lasttab = tabs[tabcount - 1]; //获得最后一个Tab选项卡 
var lasttitle = lasttab.panel('options').tab.text(); //最后一个Tab选项卡的Title 
var currtab_title = $('#mm').data("currtab"); //当前Tab选项卡的Title 
 
   if (lasttitle == currtab_title) { 
     $('#mm-tabcloseright').attr("disabled", "disabled").css({ "cursor": "default", "opacity": "0.4" }); 
   } 
   else { 
     $('#mm-tabcloseright').removeAttr("disabled").css({ "cursor": "pointer", "opacity": "1" }); 
   }

效果图:

jQuery EasyUI实现右键菜单变灰不可用效果

 图二:当前页右侧全部关闭

第三,实现“当前页左侧全部关闭”变灰不可用。

这个跟第二个相反就行了,获得第一个Tab选项卡的标题和当前Tab选项卡的标题进行比较。

var onetab = tabs[0]; //第一个Tab选项卡 
var onetitle = onetab.panel('options').tab.text(); //第一个Tab选项卡的Title 
   if (onetitle == currtab_title) { 
     $('#mm-tabcloseleft').attr("disabled", "disabled").css({ "cursor": "default", "opacity": "0.4" }); 
   } 
   else { 
     $('#mm-tabcloseleft').removeAttr("disabled").css({ "cursor": "pointer", "opacity": "1" }); 
   }

最后,实现的效果如下图

jQuery EasyUI实现右键菜单变灰不可用效果

图三:当前页左侧全部关闭

上面实现了三种情况下的变灰不可用的效果,当鼠标放到上面点击,右键菜单就会消失,其实解决的办法很简单,希望这篇文章可以给大家带来启发。

Javascript 相关文章推荐
Jquery 设置标题的自动翻转
Oct 03 Javascript
全面理解面向对象的 JavaScript(来自ibm)
Nov 10 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
聊聊Vue.js的template编译的问题
Oct 09 Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 Javascript
webpack优化的深入理解
Dec 10 Javascript
JS字符串和数组如何实现相互转化
Jul 02 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 Javascript
10个很棒的jQuery代码片段
Sep 24 #Javascript
JS模拟实现Select效果代码
Sep 24 #Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 #Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 #Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 #Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 #Javascript
js中不同的height, top的区别对比
Sep 24 #Javascript
You might like
用PHP函数解决SQL injection
2006/12/09 PHP
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
use jscript List Installed Software
2007/06/11 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
Node.js模块加载详解
2014/08/16 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
2017/09/07 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
python 循环while和for in简单实例
2016/08/16 Python
python实现上传下载文件功能
2020/11/19 Python
Python内存管理实例分析
2019/07/10 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
Python2与Python3的区别详解
2020/02/09 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
介绍一下代理模式(Proxy)
2014/10/17 面试题
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
办公室岗位职责
2014/02/12 职场文书
模范班主任事迹材料
2014/12/17 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
2015年教师国培感言
2015/08/01 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL