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 相关文章推荐
js获取url参数值的两种方式
Sep 10 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
jQuery实现的放大镜效果示例
Sep 13 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
JS中的多态实例详解
Oct 15 Javascript
详解Immutable及 React 中实践
Mar 01 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
如何手写一个简易的 Vuex
Oct 10 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 filter_var() 函数 Filter 函数
2012/04/25 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
jQuery基于扩展简单实现倒计时功能的方法
2016/05/14 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
2016/08/18 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
Python实现的Kmeans++算法实例
2014/04/26 Python
Python编写检测数据库SA用户的方法
2014/07/11 Python
使用Python中的cookielib模拟登录网站
2015/04/09 Python
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
基于python实现文件加密功能
2020/01/06 Python
python 字符串格式化的示例
2020/09/21 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
高分子材料个人求职信范文
2013/09/25 职场文书
财务部出纳岗位职责
2013/12/22 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
《燕子专列》教学反思
2014/02/21 职场文书
餐饮总经理岗位职责
2014/03/07 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
论文答谢词
2015/01/20 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
纪委立案决定书
2015/06/24 职场文书
2017春节晚会开幕词
2016/03/03 职场文书