我正在使用 jQuery UI 选择菜单,偶尔会遇到一些问题。
它位于我的用户页面的左上角。 使用“下拉/地址”类型,有时(看似随机),下拉菜单会向上打开而不是向下打开,并且除了第一个选项外,您无法选择其中的任何选项,因为它全部位于屏幕“上方”。
有人知道那里有强制打开它的设置/选项吗?
这是一些调用代码:
$(function(){
$('select#selectionA').selectmenu({
style:'dropdown',
menuWidth: 220,
positionOptions: {
collision: 'none'
},
format: addressFormatting
});
});
该插件使用 jQuery UI 库的 Position 实用程序。如果您查看插件的 source 中的默认选项,会发现函数
positionOptions
中使用了一个 _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 文档:
flip:到对面,再次运行碰撞检测,看是否适合。如果它不适合任何一个位置,则应使用中心选项作为后备。
fit:使元素保持在所需的方向,但重新定位以使其适合。
none:不进行碰撞检测。
所以我想你可以在初始化插件时传递一个选项来定义碰撞选项
none
:
$('select').selectmenu({
positionOptions: {
collision: 'none'
}
});
还没有测试过,这只是看代码。
编辑以下评论
我注意到github上可用的javascript版本和插件网站上使用的版本不一样。我不知道你用的是哪一个,但网站上使用的实际上没有
positionOptions
选项,所以在调用selectmenu()
时指定它没有任何作用。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 的版本描述的方式使其工作。在我看来,这是一个更新/完整的版本。而且前几天还更新了。
我创建了一个包含两个选择的小测试页面。我已经更改了上面显示的下拉列表的位置。
第一个没有指定碰撞选项,因此使用“翻转”并且下拉列表显示在下面,因为上面没有足够的空间。
第二个指定了“无”,即使没有足够的空间,下拉列表也会显示在上面。
我是 Selectmenu 插件的维护者。目前有三个版本,更多信息请查看wiki:https://github.com/fnagel/jquery-ui/wiki/Selectmenu
我假设你正在使用我的叉子。碰撞问题可能与此修复有关https://github.com/fnagel/jquery-ui/pull/255,请尝试最新版本。
要强制滚动条,请使用选项 maxHeight。