1 /** 2 * 下拉菜单 3 * @constructor 4 * @author putaoshu@126.com 5 * @date 2012-03-14 6 * @param {Object} options 组件配置 7 * @param {Object} options.menuTop $('#menuTop') 点击元素 8 * @param {Object} options.menu $('#menu') 菜单主体 9 * @param {Boolean} options.autoShow false 主体元素有被遮挡时,把主体转移到上面 10 * @param {Object} options.css 11 * @param {Number} options.css.left 菜单left值 12 * @param {Number} options.css.top 菜单top值 13 * @requires vui.stick() 14 */ 15 16 vui.menu = function(options) { 17 options = $.extend({ 18 menuTop : $('#menuTop'),//点击元素ID 19 menu : $('#menu'),//菜单主体ID 20 type : 'click', //click || hover 21 autoShow : false,//自适应:即在主体元素有被遮挡时,把主体转移到上面 22 css : { 23 left:null, 24 top:null 25 } 26 },options); 27 28 var o = { 29 init:function(){ 30 options.menu.appendTo('body'); 31 if(options.type == 'click'){ 32 o.clickhide(); 33 options.menuTop.mouseup(function(){ 34 if (o.showTag){ 35 o.close(); 36 }else{ 37 o.show(); 38 } 39 return false; 40 41 }) 42 }else if(options.type == 'hover'){ 43 options.menuTop.click(function(){ 44 o.show(); 45 }) 46 options.menuTop.bind('mouseover',function(){ 47 o.show(); 48 }) 49 } 50 }, 51 showTag:false, 52 show:function(){ 53 54 var $left,$top; 55 if (options.css.left != null || options.css.top != null){ 56 vui.stick({stick:options.menuTop,stickTo:options.menu,autoShow:options.autoShow,css:{type:1,top:options.css.top,left:options.css.left}}); 57 }else{ 58 vui.stick({stick:options.menuTop,autoShow:options.autoShow,stickTo:options.menu}); 59 } 60 o.showTag=true; 61 }, 62 close:function(){ 63 options.menu.hide(); 64 o.showTag=false; 65 }, 66 mouseInsideTag : false, 67 clickhide:function(){ 68 69 options.menu.click(function(){ 70 o.close(); 71 }) 72 73 options.menu.hover(function(){ 74 o.mouseInsideTag=true; 75 }, function(){ 76 o.mouseInsideTag=false; 77 }); 78 79 $("html,body").mouseup(function(){ 80 if(o.mouseInsideTag){ 81 o.show(); 82 }else{ 83 o.close(); 84 } 85 }); 86 } 87 } 88 89 o.init(); 90 } 91 92