JQuery的mbMenu控件中增加openOnLeft选项，以在主菜单的左边打开子菜单

最近试用了JQuery的mbMenu控件来显示控件，功能还是挺强的，我是超级JavaScript小白，对JQuery也是小白中的小白，本着能用就好的态度使用这个控件。无奈遇到一个功能需求，即需要在主菜单的左侧显示子菜单，但是mbMenu默认在主菜单下方显示子菜单，也可以设置为在主菜单右侧显示子菜单，唯独没有功能允许在主菜单左侧显示子菜单，咋办？只能自己搞定了，好在目前只有一级子菜单。

以下是修改涉及的代码，留在这里只是作为一个存档。

首先增加一个openOnLeft参数，其中第7行是增加的代码

 1 options: {
 2     template: "yourMenuVoiceTemplate", // the url that returns the menu voices via ajax. the data passed in the request is the "menu" attribute value as "menuId"
 3     additionalData: "",
 4     menuSelector: ".menuContainer",
 5     menuWidth: 400,
 6     openOnRight: false,
 7     openOnLeft: false,
 8     containment: "window",
 9     iconPath: "ico/",
10     hasImages: true,
11     fadeInTime: 100,
12     fadeOutTime: 200,
13     menuTop: 0,
14     menuLeft: 0,
15     submenuTop: 0,
16     submenuLeft: 4,
17     opacity: 1,
18     openOnClick: true,
19     closeOnMouseOut: false,
20     closeAfter: 500,
21     minZindex: "auto", // or number
22     hoverIntent: 0, //if you use jquery.hoverIntent.js set this to time in milliseconds; 0= false;
23     submenuHoverIntent: 200, //if you use jquery.hoverIntent.js set this to time in milliseconds; 0= false;
24     onContextualMenu: function () { } //it pass 'o' (the menu you clicked on) and 'e' (the event)
25 },

　　

以下代码包含对openOnLeft的处理，其中第18到22行是增加的代码

 1 switch (type)
 2 {
 3     case "sm":
 4         t = $(this).position().top + op.options.submenuTop;
 5 
 6         l = $(this).position().left + $(this).width() - op.options.submenuLeft;
 7         break;
 8     case "cm":
 9         t = this.mouseY - 5;
10         l = this.mouseX - 5;
11         break;
12     default:
13         if (op.options.openOnRight)
14         {
15             t = $(this).offset().top - ($.browser.msie ? 2 : 0) + op.options.menuTop;
16             l = $(this).offset().left + $(this).outerWidth() - op.options.menuLeft - ($.browser.msie ? 2 : 0);
17         }
18         else if (op.options.openOnLeft)
19         {
20             t = $(this).offset().top - ($.browser.msie ? 2 : 0) + op.options.menuTop;
21             l = $(this).offset().left - $(this.menuContainer).outerWidth() - op.options.menuLeft - ($.browser.msie ? 2 : 0);
22         }
23         else
24         {
25             t = $(this).offset().top + $(this).outerHeight() - (!$.browser.mozilla ? 2 : 0) + op.options.menuTop;
26             l = $(this).offset().left + op.options.menuLeft;
27         }
28         break;
29 }

　　

posted on 2011-09-06 08:44  零度的火  阅读(460)  评论(0)  编辑  收藏  举报

导航