jQuery UI SelectMenu Dropdown - 打开 UP 而不是 DOWN [英] jQuery UI SelectMenu Dropdown - opens UP instead of DOWN

问题描述

我正在使用 jQuery UI 选择菜单，偶尔会遇到一些问题.

I'm using jQuery UI Select Menu and occasionally have some issues.

它位于我的用户页面的左上角.使用下拉列表/地址"类型，有时(看似随机)，下拉列表打开而不是 DOWN，除了第一个选项外，您无法选择其中的任何选项，因为它都在屏幕上方".

This is located at the top left of my users' pages. Using the "dropdown/address" type, sometimes (seemingly random), the dropdown opens UP instead of DOWN, and you can't select any options in it except the first one because it's all "above" the screen.

有人知道那里有强制打开的设置/选项吗?谢谢！

Anyone know of a setting/option in there to force it to open down? Thanks!

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

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

推荐答案

该插件使用了Position jQuery UI 库的实用程序.如果您查看 source<中的默认选项在插件的/a> 中，有一个 positionOptions 属性用于 _refreshPosition() 函数中:

The plugin uses the Position utility of the jQuery UI library. If you look at the default options in the source of the plugin, there is a positionOptions property that is used in the function _refreshPosition():

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'
        });
}

您可以看到它使用默认值 'flip' 如果没有为位置实用程序的 collision 选项提供.根据 jQuery UI 文档:

You can see it uses a default value 'flip' if none is provided for the collision option of the position utility which is. According to jQuery UI documentation:

翻转:到相反的一侧，再次运行碰撞检测，看看它是否适合.如果它不适合任何一个位置，则应使用居中选项作为后备.
fit:使元素保持在所需的方向，但重新定位以使其适合.
none:不做碰撞检测.

flip: to the opposite side and the collision detection is run again to see if it will fit. If it won't fit in either position, the center option should be used as a fall back.
fit: so the element keeps in the desired direction, but is re-positioned so it fits.
none: not do collision detection.

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

So i guess you could pass an option when initializing the plugin to define none for the collision option:

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

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

Have not tested yet, this is just by looking at the code.

编辑以下评论

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

I've noticed that the version of the javascript available on github and the one used on the plugin website are not the same. I don't know which one you are using but the one used on the website does not have a positionOptions option actually, so it has no effect to specify it when calling selectmenu().
It seems it's not possible to link directly to the javascript on the site so here's some code to illustrate:

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.在我看来，它是一个更新/完整的版本.而且是几天前更新的.

I was able to make it work as I first described with the version from github. In my opinion it is a more recent/complete version. Besides it was updated a few days ago.

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

I have created a small test page with two selects. I've changed for both the position for the dropdown to show above.
The first one does not specify the collision option, thus 'flip' is used and the dropdown displays below because there is not enough space above.
The second has 'none' specified and the dropdown shows above even if there is not enough space.

我已将小型测试项目放在我的 下拉框.

I've put the small test project on my dropbox.

这篇关于jQuery UI SelectMenu Dropdown - 打开 UP 而不是 DOWN的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！