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