• 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 }

      


    理解的越多,需要记忆的就越少
  • 相关阅读:
    学习Oracle数据库入门到精通教程资料合集
    linux编程中printf显示不加换行的缓冲问题
    让 Terminal/vim 使用 Solarized 配色
    vim插件ctags的安装和使用
    rsync 同步文件
    try catch 场景
    关于浮点型的运算---比较
    mysql数据库死锁的产生原因及解决办法
    Laravel下载地址合集
    php垃圾回收机制
  • 原文地址:https://www.cnblogs.com/Ricky81317/p/2168330.html
Copyright © 2020-2023  润新知