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 相关文章推荐
JavaScript中的其他对象
Jan 16 Javascript
jquery UI 1.72 之datepicker
Dec 29 Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
让angularjs支持浏览器自动填表
Nov 10 Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 Javascript
Jquery常用的方法汇总
Sep 01 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
bootstrap响应式工具使用详解
Nov 29 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 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的FTP学习(二)[转自奥索]
2006/10/09 PHP
PHP多例模式介绍
2013/06/24 PHP
PHP生成条形图的方法
2014/12/10 PHP
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
[01:43]倾听DOTA2英雄之声 魅惑魔女国服配音鉴赏
2013/06/06 DOTA
TensorFlow实现创建分类器
2018/02/06 Python
python计算日期之间的放假日期
2018/06/05 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
Python爬虫开发与项目实战
2020/12/16 Python
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
英语专业个人求职自荐信
2013/09/21 职场文书
片区教研活动总结
2014/07/02 职场文书
公司委托书怎么写
2014/08/02 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
领导干部考核评语
2015/01/04 职场文书
试用期辞职信范文
2015/03/02 职场文书
任命书怎么写
2015/03/02 职场文书
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL