jQuery UI SelectMenu Dropdown - 打开 UP 而不是 DOWN答案

【问题标题】：jQuery UI SelectMenu Dropdown - opens UP instead of DOWNjQuery UI SelectMenu Dropdown - 打开 UP 而不是 DOWN
【发布时间】：2012-01-02 01:58:05
【问题描述】：

我正在使用jQuery UI Select Menu，偶尔会遇到一些问题。

它位于我的用户页面的左上角。使用“下拉/地址”类型，有时（似乎是随机的），下拉菜单打开而不是向下，除了第一个选项之外，您无法选择其中的任何选项，因为它都在屏幕“上方”。

有人知道那里有一个设置/选项来强制它打开吗？谢谢！

更新.... 11/23/11 1:11pm EST 这是调用的一些代码：

$(function(){
            $('select#selectionA').selectmenu({
                style:'dropdown', 
                menuWidth: 220,
                positionOptions: {
                    collision: 'none'
                },
                format: addressFormatting
            });
        });

【问题讨论】：

标签： jquery-ui drop-down-menu select-menu

【解决方案1】：

该插件使用 jQuery UI 库的 Position 实用程序。如果您查看插件的source 中的默认选项，则在函数_refreshPosition() 中使用了一个positionOptions 属性：

options: {
    transferClasses: true,
    typeAhead: 1000,
    style: 'dropdown',
    positionOptions: {
        my: "left top",
        at: "left bottom",
        offset: null
    },
    width: null,
    menuWidth: null,
    handleWidth: 26,
    maxHeight: null,
    icons: null,
    format: null,
    bgImage: function() {},
    wrapperElement: "<div />"
}

_refreshPosition: function() {
    var o = this.options;

    // if its a pop-up we need to calculate the position of the selected li
    if ( o.style == "popup" && !o.positionOptions.offset ) {
        var selected = this._selectedOptionLi();
        var _offset = "0 " + ( this.list.offset().top  - selected.offset().top - ( this.newelement.outerHeight() + selected.outerHeight() ) / 2);
    }
    // update zIndex if jQuery UI is able to process
    this.listWrap
        .zIndex( this.element.zIndex() + 1 )
        .position({
            // set options for position plugin
            of: o.positionOptions.of || this.newelement,
            my: o.positionOptions.my,
            at: o.positionOptions.at,
            offset: o.positionOptions.offset || _offset,
            collision: o.positionOptions.collision || 'flip'
        });
}

如果没有为 position 实用程序的 collision 选项提供任何值，您可以看到它使用默认值 'flip'。根据 jQuery UI 文档：

翻转：到对面并再次运行碰撞检测以查看它是否适合。如果它不适合任何一个位置，则应该使用 center 选项作为后备选项。
fit：因此元素保持在所需的方向，但会重新定位以使其适合.
none：不做碰撞检测。

所以我猜你可以在初始化插件时传递一个选项来为碰撞选项定义none：

$('select').selectmenu({
    positionOptions: {
        collision: 'none'
    }
});

还没有测试，这只是看代码。

编辑以下评论

我注意到 github 上可用的 javascript 版本和插件网站上使用的版本不一样。我不知道你用的是哪一个，但网站上使用的那个实际上没有positionOptions选项，所以调用selectmenu()时指定它没有效果。
似乎无法直接链接到网站上的 javascript，所以这里有一些代码来说明：

defaults: {
    transferClasses: true,
    style: 'popup', 
    width: null, 
    menuWidth: null, 
    handleWidth: 26, 
    maxHeight: null,
    icons: null, 
    format: null
}

_refreshPosition: function(){   
    //set left value
    this.list.css('left', this.newelement.offset().left);

    //set top value
    var menuTop = this.newelement.offset().top;
    var scrolledAmt = this.list[0].scrollTop;
    this.list.find('li:lt('+this._selectedIndex()+')').each(function(){
        scrolledAmt -= $(this).outerHeight();
    });

    if(this.newelement.is('.'+this.widgetBaseClass+'-popup')){
        menuTop+=scrolledAmt; 
        this.list.css('top', menuTop); 
    }   
    else { 
        menuTop += this.newelement.height();
        this.list.css('top', menuTop); 
    }
}

我能够按照我第一次使用github 的版本描述的那样工作。在我看来，这是一个更新/完整的版本。此外，它是几天前更新的。

我创建了一个带有两个选择的小测试页面。我已经更改了下拉菜单的位置以显示在上面。
第一个没有指定碰撞选项，因此使用了'flip'并且下拉菜单显示在下方，因为上面没有足够的空间。
第二个指定了“无”，即使空间不足，下拉菜单也会显示在上方。

我已将小测试项目放在我的dropbox 上。

【讨论】：

我认为它有效！到目前为止，一切都很好。也谢谢解释，很清楚了。
我实际上已经通过为 positionOptions 对象提供偏移量进行了快速测试，它也对我有用。很高兴它有帮助！
知道如何在其中强制滚动条吗？哈哈。
在弹出菜单中你的意思是？它有一个 CSS 类，所以我猜你可以做类似.ui-selectmenu-menu-popup { height: 100px; overflow: auto; } 的事情。虽然有圆角，但它可能看起来有点奇怪。
我已经编辑了我的帖子。我的猜测是您从插件网站而不是从 github 获取了 javascript。

【解决方案2】：

我是 Selectmenu 插件的维护者。目前共有三个版本，更多信息请查看wiki：https://github.com/fnagel/jquery-ui/wiki/Selectmenu

我假设你正在使用我的叉子。碰撞问题可能与此修复有关https://github.com/fnagel/jquery-ui/pull/255，请尝试最新版本。

要强制滚动条使用选项 maxHeight。

【讨论】：