- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 jQuery UI Select Menu并且偶尔会遇到一些问题。
它位于我的用户页面的左上角。使用“下拉/地址”类型,有时(似乎是随机的),下拉菜单打开而不是向下,除了第一个选项之外,您无法选择其中的任何选项,因为它都在屏幕“上方”。
有人知道那里有一个设置/选项来强制它打开吗?谢谢!
更新.... 11/23/11 1:11pm EST这是调用的一些代码:
$(function(){
$('select#selectionA').selectmenu({
style:'dropdown',
menuWidth: 220,
positionOptions: {
collision: 'none'
},
format: addressFormatting
});
});
最佳答案
插件使用 Position jQuery UI 库的实用程序。如果您查看 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'
});
}
如果没有为位置实用程序的 collision
选项提供默认值,您可以看到它使用默认值 'flip'
。根据 jQuery UI 文档:
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
:
$('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 上。 .
关于jquery-ui - jQuery UI SelectMenu Dropdown - 打开 UP 而不是 DOWN,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8197074/
我正在尝试让 Bootstrap 下拉菜单与我的 Jade 布局一起使用。但实际上,当我尝试在我的 Jade 文件中执行 $(".dropdown-toggle").dropdown 时出现此错误:
我正在使用 Semantic React UI's Dropdown ,并且我希望它在其父组件安装后立即获得焦点:用户应该能够立即搜索。 我尝试在父级的 render() 中使用 ref: (thi
我有一个脚本如下: var i = 0; function add_relation() { i = i + 1; var key = $('', {
我在 MVC 中有 2 个 DropDowns 并尝试使用 AngularJS。我的第一个 DropDown 填充了正确来自数据库的数据。当用户在第一个 DropDown 上进行选择时,第二个 Dro
我是一名开发新手,但我偶然发现了一个我无法解决的案例。我将 ASP.NET MVC 与 C# 以及一些 javascript(JQuery、JSON...)结合使用。 我要做的是根据在 other 中
在 Bootstrap 文档中,似乎有两种不同的方法来创建下拉列表: .dropdown .btn-group first如下: Dropdown ...
我确实在 kv 文件中定义了一个基本的自定义 DropDown。应用程序 GUI 非常简单,顶部有一个按钮栏,屏幕的其余部分有一个 TextInput。这是代码: dropdowntrialgui.p
在移动 View 中单击 .dropdown 菜单时,.dropdown 和 .dropdown-menu 之间有一个小空间. 如图所示 Question is it possible to remo
我正在尝试创建一个类似于 DataEntry 网格/表的结构,其中用户在单击按钮时追加新行。该行将包含文本框、下拉菜单、日历控件。所有这些都应该在客户端完成。到目前为止,我已经有了这个,正如你所看到的
我有一个带有使用 ul 和 li ( jsfiddle ) 的下拉列表的 jsfiddle。尝试将其转换为选择选项下拉列表时,我没有得到相同的选项 ([jsfiddle]) 2 .我猜这与我重命名某个
我正在使用@atlaskit/dropdown-menu (https://atlaskit.atlassian.com/packages/core/dropdown-menu)。我想在 Item 点
我在我的 angular 应用程序中使用 PrimeNG,我有 p-dropdown 的问题 问题 我为 country 和 caste_category 有两个下拉菜单,我只为 India 提供 c
我有一个表单 View ,在编辑模板中我有两个下拉菜单。 下拉 1 明确设置了允许值的列表。它也设置为自动回发。 下拉 2 是数据绑定(bind)到 objectdatasource,这个 objec
我有一个名为 Agency 的下拉菜单,其中包含 2 个选项: 文凭 PPS 如果选择 SPM,则不会出现下拉菜单。但是,如果选择 PPS,则会出现另外 2 个名为 Department 和 Offi
我是 Angular 的新手,所以这可能是一个非常简单的问题。我正在使用 ngx-select-dropdown (下拉控件)。页面上有两个下拉控件,当第一个下拉列表更改时,第二个下拉列表应更新下拉选
我有一个包含文本区域的下拉菜单。当在文本区域按下返回键时,我希望关闭下拉菜单。这是以下内容的作用: $(document).ready(function(){ $('#edit').keypres
我的页面中有这些SELECT Pending Confirmed Cancelled Refunded Shipped Paid Complete 还有这个 Pending Confirme
我有兴趣学习以智能、优雅的方式在整个站点中构建导航项,这些导航项具有胡萝卜,单击后会展开菜单项列表。 我希望动态构建菜单项(不一定全部使用 ajax)。但它们不应在页面上进行硬编码。 这似乎是像 TW
我有一个选择下拉菜单,一个是 Bootstrap 导航下拉菜单,而不是单击以打开 Bootstrap 导航下拉菜单我在鼠标悬停时更改了它但是当选择下拉菜单打开并且鼠标悬停在 Bootstrap 导航上
我对此很陌生,所以如果我的问题没有按应有的方式提出,我深表歉意。 基本上,我使用 jQuery 的目的是,当从第一个下拉框中选择名为“Apple”的字段时,第二个下拉框将只允许选择“Firm”字段,而
我是一名优秀的程序员,十分优秀!