现在的位置: 首页 > easyui > Menu > contextMenu > 正文
小 中 大
menu组件disableItem方法无效之完善篇
2012年06月06日 ⁄ contextMenu ⁄ 共 6964字 ⁄ 评论数 3 ⁄ 被围观 19,095 views+
文章目录
[隐藏]

在之前的一篇文章中我提到过menu的disableItem方法并无法阻止对绑定事件的调用，当时的解决方案基于良好的事件绑定方式，也就是事件全部用jQuery绑定。现实总是残酷的，大部分的代码仍然习惯使用onclick方式绑定事件，这样兼容javascript原生的onclick绑定事件的方式就显得很有必要。

前一篇文章中使用的方式是修改源码，这里为了最大限度保持源码的纯洁度，采用直接覆写menu的disableItem和enableItem方法了,在引入easyui核心库后，做以下覆盖定义即可：

实现代码：

  1. /**
  2.  * menu方法扩展
  3.  * @param {Object} jq
  4.  * @param {Object} region
  5.  */
  6. $.extend($.fn.menu.methods, {
  7.         /**
  8.          * 激活选项（覆盖重写）
  9.          * @param {Object} jq
  10.          * @param {Object} itemEl
  11.          */
  12.         enableItem: function(jq, itemEl){
  13.             return jq.each(function(){
  14.                 var t = $(itemEl);
  15.                 var state = t.data('menu.item');
  16.                 if (!state) {
  17.                     t.data('menu.item', {
  18.                         options: {}
  19.                     });
  20.                 }
  21.                 state = t.data('menu.item');
  22.                 if(state.onclickStr){
  23.                     var newclick = new Function(state.onclickStr);
  24.                     t.bind('click',newclick);
  25.                 }else{
  26.                     if (state.onclick) {
  27.                         t.bind('click', state.onclick);
  28.                         state.onclick = null;
  29.                     }
  30.                 }
  31.                 t.removeClass('menu-item-disabled');
  32.             });
  33.         },
  34.         /**
  35.          * 禁用选项（覆盖重写）
  36.          * @param {Object} jq
  37.          * @param {Object} itemEl
  38.          */
  39.         disableItem: function(jq, itemEl){
  40.             return jq.each(function(){
  41.                 var t = $(itemEl);
  42.                 var state = t.data('menu.item');
  43.                 if (!state) {
  44.                     t.data('menu.item', {
  45.                         options: {}
  46.                     });
  47.                 }
  48.                 state = t.data('menu.item');
  50.                 var onclickStr = t.attr("onclick");
  51.                 if(onclickStr && onclickStr != ""){
  52.                     state.onclickStr = onclickStr;
  53.                     t.attr("onclick","");
  54.                 }else{
  55.                     t.addClass('menu-item-disabled');
  56.                     if (t.data("events")["click"]) {
  57.                         var eventData = t.data("events")["click"];
  58.                         for (var i = 0; i < eventData.length; i++) {
  59.                             if (eventData[i].namespace != "menu") {
  60.                                 state.onclick = eventData[i]["handler"];
  61.                                 t.unbind('click', eventData[i]["handler"]);
  62.                             }
  63.                         }
  64.                     }
  65.                 }
  66.                 t.addClass('menu-item-disabled');
  67.             });
  68.         }}
  69. );

效果演示：

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

更新日志：

2012-12-19:

因为jQuery1.8.0版本开始调整$.data函数功能，故代码要稍作变成改动后的代码如下：

  1. /**
  2.  * menu方法扩展
  3.  * @param {Object} jq
  4.  * @param {Object} itemEl
  5.  */
  6. $.extend($.fn.menu.methods, {
  7.     /**
  8.      * 激活选项（覆盖重写）
  9.      * @param {Object} jq
  10.      * @param {Object} itemEl
  11.      */
  12.     enableItem : function(jq, itemEl) {
  13.         return jq.each(function(){
  14.             var jqElements = $(itemEl);
  15.             var state = $.data(this, 'menu');
  17.             if (jqElements.length > 0) {
  18.                 jqElements.each(function(){
  19.                     if ($(this).hasClass('menu-item-disabled')) {
  20.                         for(var i=0; i<state._eventsStore.length; i++){
  21.                             var itemData = state._eventsStore[i];
  22.                             if(itemData.target == this){
  23.                                 //恢复超链接
  24.                                 if (itemData.href) {
  25.                                     $(this).attr("href", itemData.href);
  26.                                 }
  27.                                 //回复点击事件
  28.                                 if (itemData.onclicks) {
  29.                                     for (var j = 0; j < itemData.onclicks.length; j++) {
  30.                                         $(this).bind('click', itemData.onclicks[j]);
  31.                                     }
  32.                                 }
  33.                                 //设置target为null，清空存储的事件处理程序
  34.                                 itemData.target = null;
  35.                                 itemData.onclicks = [];
  36.                                 $(this).removeClass('menu-item-disabled');
  37.                             }
  38.                         }
  39.                     }
  40.                 });
  41.             }
  42.         });
  43.     },
  44.     /**
  45.      * 禁用选项（覆盖重写）
  46.      * @param {Object} jq
  47.      * @param {Object} itemEl
  48.      */
  49.     disableItem : function(jq, itemEl) {
  50.         return jq.each(function() {
  51.             var jqElements = $(itemEl);
  52.             var state = $.data(this,'menu');
  54.             if (jqElements.length > 0) {
  55.                 if (!state._eventsStore)
  56.                     state._eventsStore = [];
  57.                 jqElements.each(function(){
  58.                     if (!$(this).hasClass('menu-item-disabled')) {
  59.                         var backStore = {};
  60.                         backStore.target = this;
  61.                         backStore.onclicks = [];
  62.                         //处理超链接
  63.                         var strHref = $(this).attr("href");
  64.                         if (strHref) {
  65.                             backStore.href = strHref;
  66.                             $(this).attr("href", "javascript:void(0)");
  67.                         }
  68.                         //处理直接耦合绑定到onclick属性上的事件
  69.                         var onclickStr = $(this).attr("onclick");
  70.                         if (onclickStr && onclickStr != "") {
  71.                             backStore.onclicks[backStore.onclicks.length] = new Function(onclickStr);
  72.                             $(this).attr("onclick", "");
  73.                         }
  74.                         //处理使用jquery绑定的事件
  75.                         var eventDatas = $(this).data("events") || $._data(this, 'events');
  76.                         if (eventDatas["click"]) {
  77.                             var eventData = eventDatas["click"];
  78.                             for (var i = 0; i < eventData.length; i++) {
  79.                                 if (eventData[i].namespace != "menu") {
  80.                                     backStore.onclicks[backStore.onclicks.length] = eventData[i]["handler"];
  81.                                     $(this).unbind('click', eventData[i]["handler"]);
  82.                                     i--;
  83.                                 }
  84.                             }
  85.                         }
  86.                         //遍历_eventsStore数组，如果有target为null的元素，则利用起来
  87.                         var isStored = false;
  88.                         for(var j=0; j<state._eventsStore.length; j++){
  89.                             var itemData = state._eventsStore[j];
  90.                             if(itemData.target==null){
  91.                                 isStored = true;
  92.                                 state._eventsStore[j] = backStore;
  93.                             }
  94.                         }
  95.                         //没有现成的，则push进去
  96.                         if(isStored==false){
  97.                             state._eventsStore[state._eventsStore.length] = backStore;
  98.                         }
  99.                         $(this).addClass('menu-item-disabled');
  100.                     }
  101.                 });
  102.             }
  103.         });
  104.     }
  105. });
返回

作者:

【上篇】
【下篇】

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

  1. easyui菜单disableItem无效的解决方法
  2. easyui菜单disableItem无效的解决方法
jQuery Easyui 源码分析之combobox组件
menu组件disableItem方法无效之完善篇
实现tabs组件IFrame模式的遮罩效果
tab组件的小工具条handler入参无法获取事件对象

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

  1. 段 : 2015年03月03日16:08:47  -49楼 @回复 回复

查看来自外部的引用: 2

给我留言

留言无头像?


插入图片

返回首页

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