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

 更新时间:2015年09月24日 16:43:45   作者:田念明  
用jQuery实现了三种情况下的变灰不可用的效果,当鼠标放到上面点击,右键菜单就会消失,其实解决的办法也很简单,只要在对应的单击事件里重新绑定右键菜单即可,需要的朋友可以参考下

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

当只打开一个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样式,设置了一下它的透明度使它变灰。

效果图:

图一:除此之外全部关闭

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

当一个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" }); 
   } 

效果图:

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

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

这个跟第二个相反就行了,获得第一个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" }); 
   } 

最后,实现的效果如下图

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

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

相关文章

  • 分享12个实用的jQuery代码片段

    分享12个实用的jQuery代码片段

    这篇文章主要介绍了12个实用的jQuery代码片段,本文给出了在新窗口打开链接、设置等高的列、jQuery预加载图像、禁用鼠标右键、设定计时器等实用代码片段,需要的朋友可以参考下
    2016-03-03
  • 在页面加载完成后通过jquery给多个span赋值

    在页面加载完成后通过jquery给多个span赋值

    想在页面加载完成后,有几个地方显示当前时间,所以想通过jquery给多个span赋值,需要的朋友可以参考下
    2014-05-05
  • JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数

    JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数

    显示用户输入的字符数 限制用户输入的字符数的实现方法。
    2009-05-05
  • jQuery Validate设置onkeyup验证的实例代码

    jQuery Validate设置onkeyup验证的实例代码

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。这篇文章主要介绍了jQuery Validate设置onkeyup验证的相关资料,需要的朋友可以参考下
    2016-12-12
  • JQuery select(下拉框)操作方法汇总

    JQuery select(下拉框)操作方法汇总

    这篇文章主要介绍了JQuery select(下拉框)操作方法汇总,本文讲解了获取选中项、获取当前选中项的索引值、获取当前option的最大索引值、获取DropdownList的长度等内容,需要的朋友可以参考下
    2015-04-04
  • jquery+css实现移动端元素拖动排序

    jquery+css实现移动端元素拖动排序

    这篇文章主要为大家详细介绍了jquery+css实现移动端元素拖动排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • jQuery使用元素属性attr赋值详解

    jQuery使用元素属性attr赋值详解

    本文主要给大家讲解的是jQuery使用元素属性attr设置多个键值或函数的方法和示例,非常的实用,推荐给小伙伴们参考下。
    2015-02-02
  • jquery+easeing实现仿flash的载入动画

    jquery+easeing实现仿flash的载入动画

    本文主要给大家讲述的是如何使用jquery+easeing实现仿flash的载入动画的方法,附上示例代码,非常细致全面,这里推荐给大家,希望对大家熟练使用jQuery有所帮助。
    2015-03-03
  • jquery mobile实现拨打电话功能的几种方法

    jquery mobile实现拨打电话功能的几种方法

    在做一个便民服务电话,用到移动web中列出的电话,点击需要实现调用通讯录,拨打电话功能,有需要的朋友可以参考一下
    2013-08-08
  • jQuery 动画基础教程

    jQuery 动画基础教程

    用jquery实现简单动画的制作,希望看了这篇文章后,建议大家自己手工打打,学习一下他的思路。
    2008-12-12

最新评论