现在的位置: 首页 > easyui > Menu > contextMenu > 正文
小 中 大
easyui菜单disableItem无效的解决方法
2012年02月08日 ⁄ contextMenu ⁄ 共 2425字 ⁄ 评论数 2 ⁄ 被围观 12,086 views+
文章目录
[隐藏]

Bug描述：

在jQuery easyui 1.2.5版本中menu组件提供了disableItem和enableItem方法，用于设置菜单按钮中某个item是否可用，入参是某个item的selector。遗憾的是这两个方法基本都用不起来，分析了一下代码，这两个接口的实现写的真是太粗糙太糟糕了：

  1. /**
  2.  * 
  3.  * @param {Object} _2d6 jQuery对象
  4.  * @param {Object} _2d7 字符串 item的选择器描述
  5.  * @param {Object} _2d8 布尔型 用于设置是设为可用还是设为不可用
  6.  */
  7. function _2d5(_2d6, _2d7, _2d8){
  8.     var t = $(_2d7);
  9.     if (_2d8) {
  10.         t.addClass("menu-item-disabled");
  11.         //常态下_2d7咋的可能有onclick属性
  12.         if (_2d7.onclick) {
  13.             _2d7.onclick1 = _2d7.onclick;
  14.             _2d7.onclick = null;
  15.         }
  16.     }
  17.     else {
  18.         t.removeClass("menu-item-disabled");
  19.         //企图用_2d7的onclick1属性备份item的事件函数？显然不能达到目的。
  20.         if (_2d7.onclick1) {
  21.             _2d7.onclick = _2d7.onclick1;
  22.             _2d7.onclick1 = null;
  23.         }
  24.     }
  25. };

解决方案：

很多人可能会想，jQuery里面不就可以通过attr函数设置元素的disabled属性吗？可惜在w3c的标准中，只有button,select等Form元素才有这个属性，其它元素其实是没有的，即使你设置了其它元素的disabled属性为true，你也无法阻止点击他们时他们的响应事件。而easyui的menu显然不是通过button实现的，所以这招不是很有效果。

对于Dom元素上的事情绑定，又分为两种情况：

  1. javascript自身的onclick属性绑定js语句或者函数
  2. 使用jQuery里面的事件绑定机制将event绑定到Dom上

如果easyui menu 的disableItem和enableItem接口同时要处理这两种情况，那就较为复杂了，对于第一种情况，有同学可能想到利用jQuery的attr函数动态设置Dom元素的onclick属性值，但是不争气的是IE的处理机制跟别的浏览器不太一样，即便是设置了Dom元素的onclick属性值，也得不到相应调用。

个人觉得，既然使用了jQuery框架就应该让代码更符合jQuery的规范，在事件处理机制上，jQuery应该是优于原生机制的，onclick方式绑定事件耦合度较高，不够灵活，在使用了jQuery的前提下就不提倡使用了，如果抛开onclick方式绑定事件，实现disableItem和enableItem就较为简单了：

  1. 将原先绑定的用户事件备份到Dom元素中，用于enableItem的时候恢复。
  2. disable的时候解除命名空间不为 'menu'的click事件的绑定,不能全部解除
  3. enableItem的时候重新将备份的事件绑定到Dom上就可以了。

代码简述：

  1. function setDisabled(target, itemEl, disabled){
  2.     var t = $(itemEl);
  3.     var state = t.data('menu.item');
  4.     if (!state) {
  5.         t.data('menu.item', {
  6.             options: {}
  7.         });
  8.     }
  9.     state = t.data('menu.item');
  10.     if (disabled) {
  11.         t.addClass('menu-item-disabled');
  12.         if (t.data("events")["click"]) {
  13.             var eventData = t.data("events")["click"];
  14.             for (var i = 0; i < eventData.length; i++) {
  15.                 if (eventData[i].namespace != "menu") {
  16.                     state.onclick = eventData[i]["handler"];
  17.                     t.unbind('click', eventData[i]["handler"]);
  18.                 }
  19.             }
  20.         }
  22.     }
  23.     else {
  24.         t.removeClass('menu-item-disabled');
  25.         if (state.onclick) {
  26.             t.bind('click', state.onclick);
  27.             state.onclick = null;
  28.         }
  29.     }
  30. };

效果演示：

http://www.easyui.info/easyui/demo/menu/menu_bug_1.html

更新日志：

2012-06-05更新：

增加对原生javascript使用onclick方式绑定事件的支持，详细内容参见《menu组件disableItem方法无效之完善篇》

返回

作者:

【上篇】
【下篇】

您可能还会对这些文章感兴趣！

  1. menu组件disableItem方法无效之完善篇
  2. menu组件disableItem方法无效之完善篇
layout修正:嵌套使用时子布局会遮盖父布局
一些javascript代码的小细节
jQuery Easyui 1.3.2版本即将发布

目前有 2 条留言 其中：访客:1 条, 博主:0 条 引用: 1

  1. 白小白 : 2014年07月22日17:18:30  -49楼 @回复 回复

查看来自外部的引用: 1

给我留言

留言无头像?


插入图片

返回首页

Copyright © 2012-2017 WebUI框架使用参考  保留所有权利.   Theme by Robin
×