View Code
1 /**
2 + ---------------------------------------- +
3 + HoverMenu组件v1.0
4 + Author: zzf
5 + Date: 2012-3-27
6 + ---------------------------------------- +
7 **/
8 /**
9 * hovermenu弹出菜单效果
10 * @name jQuery.HoverMenu
11 * @param {object} obj 对象形式的参数
12 * @class
13 * @return jQuery.HoverMenu instance
14 */
15
16 $.HoverMenu = function(opts) {
17 //如果在构造实例的时候忘了new,就重新实例化
18 if (! (this instanceof arguments.callee)) {
19 return new arguments.callee(opts);
20 }
21 //执行类似其他语言的初始化函数，利用apply指定上下文(context)为该实例，并且传入参数
22 this.init.apply(this, arguments);
23 }
24
25 $.HoverMenu.prototype = function (){
26 var getZindex=function (){
27 var ret=0,i=0,temp,tags=$('*'),len=tags.length;
28 for(; i<len; i++) {
29 temp=parseInt(tags.eq(i).css('zIndex'));
30 if (temp>ret) ret=temp;
31 }
32 return ret;
33 },
34 map={
35 'mouseenter':'mouseleave',
36 'show':'hide',
37 'fadeIn':'fadeOut',
38 'slideDown':'slideUp',
39 'toggle':'toggle',
40 'click':'click',
41 'mouseover':'mouseout'
42 };
43 return{
44 constructor: $.HoverMenu,
45 init: function(opts) {
46 var self=this;
47 //配置属性
48 $.extend(this, {
49 wrap:null, //触发层,必须指定
50 target:null, //弹出层,必须指定
51 event: 'mouseenter', //默认事件 hover
52 position:'b', //相对触发层的位置 l左 r右 t上 b下 默认值为b
53 offsetX:0, //水平偏移 默认值为0
54 offsetY:0, //垂直偏移 默认值为0
55 hideTimeout: 300, //隐藏延迟时间
56 close:null, //关闭,一般用于click触发的弹出菜单
57 callback: $.noop, //回调函数
58 fx:'show', //弹出时的动画效果 默认值为"show"
59 fxTime:0 //动画效果执行时间 默认值为0
60 },opts || {});
61
62 if (!this.wrap.length || !this.target.length ) return;
63 if (this.target.is(':visible')) {this.target.hide()};
64 this.wrap.bind(this.event,function (){self.showMe.call(self)});
65 if (this.close) {
66 this.close.live(map[this.event],function (){self.hideMe.call(self,this)});
67 }else{
68 this.wrap.bind(map[this.event],function (){self.hideMe.call(self)});
69 }
70 },
71 showMe:function (){
72 var x=0,
73 y=0,
74 $wrap=this.wrap,
75 $target=this.target,
76 w=$wrap.outerWidth(),
77 h=$wrap.outerHeight(),
78 tw=$target.outerWidth(),
79 th=$target.outerHeight();
80
81 $wrap.css('position')==='static' && $wrap.css('position','relative');
82 $wrap.css('zIndex',(getZindex()+1));
83 switch(this.position){
84 case "l":
85 x=-w+this.offsetX-1;
86 y=this.offsetY;
87 break
88 case "r":
89 x=w+this.offsetX;
90 y=this.offsetY;
91 break
92 case "t":
93 x=this.offsetX;
94 y=-th+this.offsetY+1;
95 break
96 case "b":
97 default:
98 x=this.offsetX;
99 y=h+this.offsetY-1;
100 }
101 this.target.css({"position":"absolute","left":x,"top":y}).stop(true,true)[this.fx](this.fxTime);
102 },
103 hideMe:function (target){
104 var self=this;
105 setTimeout(function (){self.target.stop(true,true)[map[self.fx]](self.fxTime);},this.hideTimeout);
106 this.callback && this.callback.call($(target));
107 }
108 }
109 }();
110
AAA
触发层,必须指定
弹出层,必须指定
触发层,必须指定
弹出层,必须指定
触发层,必须指定
弹出层,必须指定
触发层,必须指定
弹出层,必须指定
触发层,必须指定
- aaaa
- bbb
- ccc
- ddd