jquery ui selectmenu:如何正确设置动态宽度?

Ruv*_*son 7 jquery jquery-ui jquery-plugins

我想使用来自felixnagel的jquery ui selectmenu.它有效,但我有一个问题,即jquery总是为selectmenu设置一个太小的宽度,以便打开/关闭图标出现在内容上方.我知道我可以在命令selectmenu()中设置宽度,但我有几个不同的选择菜单,所以我想知道在哪里可以影响正确计算选择菜单的宽度,这样我就可以给它是宽度的额外px.

我试图在.js文件中找到它,但从现在开始我没有成功.希望你们中的某个人知道我能在这里做些什么.

非常感谢你

Ruven

小智 10

这很简单,可以根据内容进行调整.

$( "select" ).selectmenu({ width : 'auto'});
Run Code Online (Sandbox Code Playgroud)


这使用硬编码宽度来避免在选择注释中提到的不同宽度的项目时出现问题:

$( "select" ).selectmenu({ width : 250});
Run Code Online (Sandbox Code Playgroud)

  • 此选项的问题在于它将选择的宽度调整为当前选择的任何内容.因此它会不断更改宽度并通过使选项窗口的边缘与选择不匹配来中断UI. (3认同)

Sim*_*röm 9

也许这样的事情会对你有所帮助

<select width="200">
    <option>Small</option>
</select>


$(document).ready(function(){
    $.each($('select'), function () {
        $(this).selectmenu({ width : $(this).attr("width")})
    })
})
Run Code Online (Sandbox Code Playgroud)

您遍历每个选择元素,您将有可能在选择元素width属性中指定with.也许你觉得它很有用,可以修改它以满足你的需求.

编辑1:或者如果你只是想通过代码添加一些东西(我想你也可以用CSS做),你可以使用类似的东西:

<select>
    <option>Small</option>
</select>


$(document).ready(function(){
    $.each($('select'), function () {
        $(this).selectmenu({ width : $(this).width() + 100}) // You just take the width of the current select and add some extra value to it
    })
})
Run Code Online (Sandbox Code Playgroud)