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 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
解析使用JS 清空File控件的路径值
Jul 08 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
jQuery获取动态生成的元素示例
Jun 15 Javascript
Javascript基础教程之switch语句
Jan 18 Javascript
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
JS轮播图实现简单代码
Feb 19 Javascript
详解es6超好用的语法糖Decorator
Aug 01 Javascript
React router动态加载组件之适配器模式的应用详解
Sep 12 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 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可逆加密解密算法实例代码
2014/01/21 PHP
php多任务程序实例解析
2014/07/19 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
详解JavaScript函数
2015/12/01 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
python实现用于测试网站访问速率的方法
2015/05/26 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
机器学习的框架偏向于Python的13个原因
2017/12/07 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
会议开场欢迎词
2014/01/15 职场文书
煤矿安全知识竞赛活动总结
2014/07/07 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
避暑山庄导游词
2015/02/04 职场文书
pytorch MSELoss计算平均的实现方法
2021/05/12 Python