扩展 filagroup iPod 风格菜单

• 下载源代码 - 10.31 KB

引言

filamentgroup 的 jQuery iPod 风格弹出菜单是一个很棒的菜单。你点击它，它就会出现。原始网站是

• http://filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

背景

我想把它用作我网站的主菜单。菜单的第一层应该始终可见，不再需要点击按钮。我对 JS 文件做了一些修改。

Using the Code

对原始代码的修改是（加粗为修改或新增代码）

第 65~90 行

var options = jQuery.extend({
    content: null,
    width: 180,     // width of menu container, must be set or passed in to 
            // calculate widths of child menus
    maxHeight: 180,     // max height of menu (if a drilldown: height does not 
            // include breadcrumb)
    positionOpts: {
        posX: 'left', 
        posY: 'bottom',
        offsetX: 0,
        offsetY: 0,
        directionH: 'right',
        directionV: 'down', 
        detectH: true, // do horizontal collision detection  
        detectV: true, // do vertical collision detection
        linkToFront: false
    },
    showSpeed: 200, // show/hide speed in milliseconds
    topLevelStable: false,
 
    callerOnState: 'ui-state-active',     // class to change the appearance of 
                    // the link/button when the menu is showing
    loadingState: 'ui-state-loading',     // class added to the link/button while the 
                    // menu is created

第 105~115 行

if (options.flyOutOnState) { container.find('li a').removeClass(options.flyOutOnState); };
if (options.callerOnState) {     caller.removeClass(options.callerOnState); };        
if (container.is('.fg-menu-ipod')) { menu.resetDrilldownMenu(); };
if (container.is('.fg-menu-flyout')) { menu.resetFlyoutMenu(); };    
if (!(options.topLevelStable)) container.parent().hide();    
menu.menuOpen = false;
$(document).unbind('click', killAllMenus);
$(document).unbind('keydown');

第 15~60 行

$.fn.menu = function(options) { 
    var caller = this; 
    var options = options; 
    var m = new Menu(caller, options); 
    allUIMenus.push(m); 
    var gop = jQuery.extend({ 
        topLevelStable: false
     },options);

    $(this)
         .mousedown(function() {
             if (!(gop.topLevelStable)) {
                 if (!m.menuOpen) { m.showLoading(); };
             }
         })
         .click(function() {
             if (!(gop.topLevelStable)) {
                 if (m.menuOpen == false) { m.showMenu(); }
                 else { m.kill(); };
             }
             return false;
         });
 
    $(this)
         .ready(function() {
             if (gop.topLevelStable) {
                 if (!m.menuOpen) { m.showLoading(); };
             }
         })
         .ready(function() {
             if (gop.topLevelStable) {
                if (m.menuOpen == false) { m.showMenu(); }
                 else { m.kill(); };
                 return false;
             }
         });
     $(window).resize(function() {
         $(".positionHelper").css("left", $("#menuhock").offset().left);
     });
 };

然后将占位元素的高度设置为零 (style:height: 0) 并使用参数 topLevelStable: true 初始化菜单。

它有效。我在我自己的网站上使用了它 (http://ww.songlife.net，仍在升级中)。