1 /** 2 * 右键菜单 3 * @constructor 4 * @author putaoshu@126.com 5 * @date 2012 6 * @param {Object} obj 主对象 7 * @param {Object} options 组件配置 8 * @param {Object} options.menu null 菜单主体 9 * @param {Nummber} options.zIndex 2 菜单z-index 10 * @param {Boolean} options.autoShow true 自适应:即在主体元素有被遮挡时,把主体转移到上面 11 * @param {Boolean} options.preventContextmenu true 阻止系统默认右键菜单 12 * @param {Number} options.diff 2 当前位置与菜单展示位置的差值 13 * @param {Function} options.callback 回调函数 14 * @example 15 vui.contextmenu($('#test'),{ 16 menu:$('#contextmenu') 17 }) 18 */ 19 vui.contextmenu = function(obj,options){ 20 options = $.extend({ 21 menu : null, //菜单主体 22 zIndex : 2, //菜单z-index 23 autoShow : true ,//自适应:即在主体元素有被遮挡时,把主体转移到上面 24 preventContextmenu : true, //阻止右键菜单 25 diff:2, //当前位置与菜单展示位置的差值 26 callback:null 27 },options); 28 var contextmenu = { 29 el:obj, 30 menu:options.menu, 31 init:function(){ 32 if (options.preventContextmenu){ 33 this.preventContextmenu(options.preventContextmenu); 34 } 35 if (options.menu == null){ 36 alert('options error'); 37 } 38 39 var o = this; 40 this.hide(); 41 this.preventContextmenu(this.menu); 42 this.setStyle(); 43 this.el.bind('contextmenu',function(event){ 44 event.preventDefault(); 45 var x = event.pageX+options.diff; 46 var y = event.pageY+options.diff; 47 if (options.autoShow){ 48 var docHeight = $(window).height()+$(document).scrollTop(); 49 var coreTop = y - options.diff + options.menu.outerHeight(); 50 if (coreTop>docHeight){ 51 y = y - options.menu.outerHeight(); 52 } 53 } 54 options.menu.css({ 55 left:x, 56 top:y 57 }) 58 o.show(); 59 o.clickBodyHide(); 60 }) 61 }, 62 clickBodyHide:function(){ 63 var o = this; 64 $('html').one('click',function(){ 65 o.hide(); 66 }) 67 }, 68 preventContextmenu:function(o){ 69 o.bind('contextmenu',function(event){ 70 return false; 71 }) 72 }, 73 setStyle:function(){ 74 this.menu.css({ 75 zIndex:options.zIndex, 76 position:'absolute' 77 }); 78 this.menu.appendTo('body'); 79 }, 80 show:function(){ 81 this.menu.show(); 82 }, 83 hide:function(){ 84 this.menu.hide(); 85 } 86 } 87 88 contextmenu.init(); 89 } 90 91