jquery右鍵菜單擴展，支持多級菜單

最近接了(le)個(gè)項目甲方爸爸一(yī)定要操作(zuò)像桌面系統一(yī)樣，要有郵件菜單，由于我們的系統用了(le)動态生(shēng)成tab，每個(gè)tab動态綁定菜單太麻煩了(le)，故重新(xīn)造了(le)個(gè)輪子(zǐ)，有需要的同學直接拿走。

菜單有2個(gè)特殊的方法，一(yī)個(gè)用于通過target去區分(fēn)是否要攔截的onInit，我這(zhè)邊主要用于是否彈出菜單，因為(wèi)我在動态加載的上(shàng)層綁定了(le)菜單，另一(yī)個(gè)用于菜單項目重構的setMenu方法.

使用：

1、引入下(xià)方css

@charset "UTF-8";
#TYF_contextmenu {position: absolute;z-index:9996;}
#TYF_contextmenu .cm_default {background:#ccc;margin: 0;padding: 3px 0;list-style:none;cursor: pointer;box-sizing: border-box;min-width:88px;font-size:14px;border:1px solid #ccc;}
#TYF_contextmenu a {display: block;text-decoration: none;}
#TYF_contextmenu a.disabled {cursor: not-allowed;color: gray;}
#TYF_contextmenu .cm_default li {padding-left:5px;position: relative;}
#TYF_contextmenu .cm_default>li:not(:last-child) {border-bottom:1px solid #ccc;}
#TYF_contextmenu .cm_default li img {width:16px;height:16px;display: inline-block;vertical-align: middle;margin-right:2px;}
#TYF_contextmenu .cm_radius {border-radius:5px;}
#TYF_contextmenu .cm_shadow {box-shadow:darkgrey 0 0 10px 0;}
#TYF_contextmenu li .cm_icon {padding-left:18px;}
#TYF_contextmenu .cm_default li s {width:6px;height:6px;border:1px solid #888;border-left-width:0;border-bottom-width:0;display:block;position:absolute;right:8px;transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);}
#TYF_contextmenu .cm_sub {position: absolute;top:0px;z-index:9997;display:none;}

2、js源碼

(function($) {
var menu;
var menucss = {};
var options = {};
var _defaultOptions = {
width:110, //菜單寬度
height:26, //菜單項高度
color:'#000000', //默認字體(tǐ)顔色
arrowcolor:'#888888', //下(xià)級菜單箭頭顔色
fontsize:14, //字體(tǐ)大小，單位像素
menuColor:'#ffffff', //菜單背景色
boardColor:'#aaaaaa', //菜單邊框顔色
itemColor:'#eeeeee', //菜單選中項背景色
fontColor:'#000000', //菜單選中項字體(tǐ)顔色
lineColor:'#dddddd', //分(fēn)隔線顔色，分(fēn)隔線顔色和背景色相同則看不出分(fēn)割線
isRadius:false, //是否圓角
isShadow:true, //是否顯示菜單陰影
isIcon:false, //顯示圖标，該項為(wèi)false則配置icon也(yě)不顯示
onInit:null, //前置過濾函數,參數e為(wèi)右鍵target對象，返回布爾值，用于右鍵點擊某個(gè)target是否顯示，eg: onInit:function(e) { ... return true}
setMenu:null, //通過該函數可根據target的動态菜單，參數e為(wèi)右鍵target對象，返回菜單對象，菜單對象同item，eg: setMenu:function(e) {... return menu}
item:[], //靜态菜單項eg:item[{text:關(guān)閉,icon:"/images/color.png",disable:true,click:function(target){}}]，文字，圖标，是否禁用默認false，點擊後的效果其中target為(wèi)目标對象
}
$.fn.contextMenu = function(options) {
if(!menu) {
options = object.assign(_defaultOptions,options);
menu = init(options);
$(document).bind("click",function(){
menu.hide();
});
}
$(this).bind("contextmenu",function(e) {
var _hasMenu = (!!options.onInit) ? options.onInit(e.target) : true;
if(_hasMenu) show(e,options);
return false;
});
return this;
}
init=function(options) {
menucss = {width:options.width,backgroundColor:options.menuColor,borderColor:options.boardColor}
var _menustr = '<div id="TYF_contextmenu"><ul class="cm_default';
if(options.isRadius) _menustr += ' cm_radius';
if(options.isShadow) _menustr += ' cm_shadow';
_menustr += '">';
_menustr += '</ul></div>';
var _menuObj = $(_menustr).hide().appendTo('body').bind('click',function(e){
e.stopPropagation();
});
_menuObj.children('ul').css(menucss);
return _menuObj;
}
setItem = function(item,target,options) {
var _menustr = '<li>';
_menustr += '<a href="javascript:void(0);"';
if(_disable) _menustr += ' class="disabled"';
_menustr += '>';
var _disable = !!item.disable ? item.disable : false;
if(options.isIcon) {
_menustr += !!item.icon ? '<img src="'+item.icon+'" />' : '<span class="cm_icon"></span>';
}

_menustr += item.text + '</a>';
if(!!item.sub) {
_menustr += '<s';
_menustr += ' style="border-color:'+options.arrowcolor+';top:'+(options.height/2-4.2)+'px"';
_menustr += '></s><ul class="cm_default cm_sub';
if(options.isRadius) _menustr += ' cm_radius';
if(options.isShadow) _menustr += ' cm_shadow';
_menustr += '"></ul>';
}
_menustr += '</li>';
var _menuItemObj = $(_menustr).css({borderColor:options.lineColor,height:options.height,lineHeight:options.height+'px'});
_menuItemObj.children('a').css({color:options.color}).bind('click',function(){
item.click(target);
});
menucss.left = options.width-10;
_menuItemObj.children("ul").css(menucss);
if(!_disable) {
_menuItemObj.hover(
function() {
$(this).css({backgroundColor:options.itemColor,color:options.fontColor});
$(this).children('ul').show();
},
function() {
$(this).css({backgroundColor:options.menuColor,color:options.color});
$(this).children('ul').hide();
}
);
}
if(!!item.sub) {
var _subItme = null;
$.each(item.sub,function(k,v){
_subItme = setItem(v,target,options);
_menuItemObj.children('ul').append(_subItme);
});
}
_menuItemObj.bind('click',function(){
menu.hide();
});
return _menuItemObj;
}
show = function(obj,options) {
if(!!options.setMenu) options.item = options.setMenu(obj.target);
menu.css({'left':obj.pageX,'top':obj.pageY}).show();
var _menustr,_menuObj;
menu.children("ul").empty();
if(!!options.item) {
$.each(options.item,function(k,v){
var _menuItem = setItem(v,obj.target,options);
menu.children('ul').append(_menuItem);
});
}
}
})(jQuery);

3、參數說(shuō)明，傳入一(yī)個(gè)option對象，參數如(rú)下(xià)

width:110, //菜單寬度
height:26, //菜單項高度
color:'#000000', //默認字體(tǐ)顔色
arrowcolor:'#888888', //下(xià)級菜單箭頭顔色
fontsize:14, //字體(tǐ)大小，單位像素
menuColor:'#ffffff', //菜單背景色
boardColor:'#aaaaaa', //菜單邊框顔色
itemColor:'#eeeeee', //菜單選中項背景色
fontColor:'#000000', //菜單選中項字體(tǐ)顔色
lineColor:'#dddddd', //分(fēn)隔線顔色，分(fēn)隔線顔色和背景色相同則看不出分(fēn)割線
isRadius:false, //是否圓角
isShadow:true, //是否顯示菜單陰影
isIcon:false, //顯示圖标，該項為(wèi)false則配置icon也(yě)不顯示
onInit:null, //前置過濾函數,參數e為(wèi)右鍵target對象，返回布爾值，用于右鍵點擊某個(gè)target是否顯示，eg: onInit:function(e) { ... return true}
setMenu:null, //通過該函數可根據target的動态菜單，參數e為(wèi)右鍵target對象，返回菜單對象，菜單對象同item，eg: setMenu:function(e) {... return menu}
item:[], //靜态菜單項eg:item[{text:關(guān)閉,icon:"/images/color.png",disable:true,click:function(target){}}]，文字，圖标，是否禁用默認false，點擊後的效果其中target為(wèi)目标對象

4、示例

$('.TYF_body .tabscontent').contextMenu({
    isRadius:true,
    lineColor:'#fff',
    item:[
      {
        text:'關(guān)閉當前菜單',
        icon:'static/picture/delete.png',
        click:function(target) {
          console.log(target);
          alert('aaa');
        }
      },
      {
        text:'關(guān)閉右側菜單',
        click:function(target) {
          console.log(target);
          alert('bbb');
        },
        sub:[
          {
            text:'子(zǐ)菜單1',
            click:function(target) {
              console.log(target);
              alert('sub1');
            },
            sub:[
              {
                text:'aaaa',
                click:function(target) {
                  alert('hhh');
                }
              }
            ]
          },
          {
            text:'子(zǐ)菜單2',
            click:function(target) {
              console.log(target);
              alert('sub2');
            }
          }
        ]
      },
      {
        text:'關(guān)閉左側菜單',
        disable:true,
        click:function(target) {
          console.log(target);
          alert('ccc');
        }
      },
      {
        text:'關(guān)閉其他菜單',
        click:function(target) {
          console.log(target);
          alert('ddd');
        }
      }
    ],
    onInit:function(e) {
      if(!!$(e).attr('data')) return true;
      return false;
    },
    setMenu:function(e) {
      console.log(e);
      if(!!$(e).attr('data') && $(e).attr('data')==10) {
        return [
          {
            text:'新(xīn)菜單',
            click:function(target) {
              alert('new menu');
            }
          }
        ];
      }else{
        return [
          {
            text:'關(guān)閉當前菜單',
            icon:'static/picture/delete.png',
            click:function(target) {
              console.log(target);
              alert('aaa');
            }
          },
          {
            text:'關(guān)閉右側菜單',
            click:function(target) {
              console.log(target);
              alert('bbb');
            },
            sub:[
              {
                text:'子(zǐ)菜單1',
                click:function(target) {
                  console.log(target);
                  alert('sub1');
                },
                sub:[
                  {
                    text:'aaaa',
                    click:function(target) {
                      alert('hhh');
                    }
                  }
                ]
              },
              {
                text:'子(zǐ)菜單2',
                click:function(target) {
                  console.log(target);
                  alert('sub2');
                }
              }
            ]
          },
          {
            text:'關(guān)閉左側菜單',
            disable:true,
            click:function(target) {
              console.log(target);
              alert('ccc');
            }
          },
          {
            text:'關(guān)閉其他菜單',
            click:function(target) {
              console.log(target);
              alert('ddd');
            }
          }
        ];
      }
    }
  });