非常漂亮网页右键菜单，JQuery实现右键菜单(3)

时间:2009-12-21 11:47来源:未知作者:admin 点击: 次

分享到：

01. //获取菜单的跟 02. var $root = $( "#" + option.alias); 03. var root = null ; 04. if ($root.length == 0) { //如果顶级不存在，这创建顶级菜单哦 05. root = buildGroup.apply(gTemp

//获取菜单的跟 
var $root = $("#" + option.alias); 
      var root = null; 
      if ($root.length == 0) { //如果顶级不存在，这创建顶级菜单哦 
          root = buildGroup.apply(gTemplet.clone()[0], [option]); 
          root.applyrule = applyRule; //把一个方法注册到dom上 
          root.showMenu = showMenu; //另外一个方法注册的该dom上 
          addItems(option.alias, option.items); //添加菜单项 
      } 
      else { 
          root = $root[0]; //否则就用这个了 
      } 

这个代码很玄乎，好像做了些什么好像有什么都没做，其实只有来看下buildGroup方法和addItems才知道到底干了什么

var buildGroup = function(obj) { //创建菜单容器 
        groups[obj.alias] = this; //菜单项注册到临时变量中 
        this.gidx = obj.alias; 
        this.id = obj.alias; 
        if (obj.disable) { //如果是禁用状态 
            this.disable = obj.disable; 
            this.className = "b-m-idisable"; 
        } 
    //设置菜单宽度，设置事件的阻止事件冒泡，并添加到body中 
        $(this).width(obj.width).click(returnfalse).mousedown(returnfalse).appendTo($("body")); 
        obj = null; 
        return this; //返回菜单本身 
    };

有了容器就可以往里面添加菜单项了，我在代码中加了详细的注释了，应该可以很好的理解了

//添加菜单项 
  var addItems = function(gidx, items) { 
      var tmp = null; 
      for (var i = 0; i < items.length; i++) {  
          if (items[i].type == "splitLine") { //如果是分割线 
              //菜单分隔线 
              tmp = sTemplet.clone()[0];  
          } else { 
              items[i].gidx = gidx; //把group的标识赋给item上 
              if (items[i].type == "group") {  
                  //菜单组 
                  buildGroup.apply(gTemplet.clone()[0], [items[i]]); //每个菜单组都是独立的div哦，所以顶级一样调用生产组的方法 
                  arguments.callee(items[i].alias, items[i].items);//递归生成菜单项 
                  items[i].type = "arrow"; //如果是group生成箭头 
                  tmp = buildItem.apply(iTemplet.clone()[0], [items[i]]);//生成菜单项的html 
              } else { 
                  //菜单项 
                  items[i].type = "ibody"; 
                  tmp = buildItem.apply(iTemplet.clone()[0], [items[i]]);//生成菜单项的html 
                  $(tmp).click(function(e) { //如果菜单项那么注册click事件 
                      if (!this.disable) { 
                          if ($.isFunction(actions[this.idx])) { 
                              actions[this.idx].call(this, target); 
                          } 
                          hideMenuPane(); 
                      } 
                      return false; 
                  }); 
              } //Endif 
           //把菜单项的右键事件屏蔽，同时注册hover的效果 
              $(tmp).bind("contextmenu", returnfalse).hover(overItem, outItem); 
          } //Endif 
          groups[gidx].appendChild(tmp); //把菜单项添加到group的中 
          tmp = items[i] = items[i].items = null; 
      } //Endfor 
      gidx = items = null; 
  };

builditem方法就比较简单，就不详细描述了，接着我们还是继续往下看主流程了哦

   
var me = $(this).each(function() { 
       //给元素添加右键事件了哦 
            return $(this).bind('contextmenu', function(e) { 
        //如果(option.onContextMenu 存在则调用并判断返回值是否显示菜单,可以利用这个在特定情况下禁用菜单 
                var bShowContext = (option.onContextMenu && $.isFunction(option.onContextMenu)) ? option.onContextMenu.call(this, e) : true; 
                if (bShowContext) { 
            //触发onShow事件，这个事件中可以执行修改rule，禁用某几项菜单项哦 
                    if (option.onShow && $.isFunction(option.onShow)) { 
                        option.onShow.call(this, root); 
                    } 
                    root.showMenu(e, this);//调用显示菜单 
                } 
        //阻止冒泡 
                return false; 
            }); 
        }); 
        //设置显示规则，第一次执行时的规则，同时也可以onshow中动态设置rule 
        if (option.rule) { 
            applyRule(option.rule); 
        }