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.

这是位于我用户页面的左上角。使用下拉菜单/地址类型，有时（看似随机），下拉菜单打开UP而不是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!

update .... 11/23/11 1:11 pm est
这是一些代码：

update.... 11/23/11 1:11pm est Here is some code of the call:

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

推荐答案

插件使用 位置 实用程序。如果您查看来源中的默认选项/ a>插件，在函数 _refreshPosition（）中使用的 positionOptions 属性： p>

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

您可以看到它使用默认值 '如果没有提供的位置实用程序的碰撞选项。根据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:

flip ：相反，碰撞检测再次运行，以查看如果适合如果它不适合任何一个位置，中心选项应该被用作回退。

fit ：所以元素保持在所需的方向，但是是re -
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.

我已经创建了一个小测试页与两个选择。我已经改变了上面显示的下拉列表的位置。

第一个没有指定碰撞选项，因此使用翻转，下面显示下面的内容，因为没有足够的空间

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.

我已经把这个小型测试项目在我的 dropbox 。

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

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