Question

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

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

非常感谢

Ruven

Answer 1

这很简单，可以根据内容进行调整。

$( "select" ).selectmenu({ width : 'auto'});

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

$( "select" ).selectmenu({ width : 250});

Answer 2

也许这样的事情会帮助你

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


$(document).ready(function(){
    $.each($('select'), function () {
        $(this).selectmenu({ width : $(this).attr("width")})
    })
})

您遍历每个选择元素，您将有可能在选择元素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
    })
})

Answer 3

这是一种黑客攻击，我不知道这有多强大，但我已经在一个特定的例子中成功使用了它：

$("select").each(function(){
    var $this=$(this);
    $this.selectmenu();
    var menu=$this.selectmenu("menuWidget");
    var button=$this.selectmenu("widget");
    button.click();
    var longest=null;
    menu.children("li").each(function(){
        var $this=$(this);
        if(longest==null || longest.text().length < $this.text().length){
            longest=$this;
        }
    });
    menu.css("width","auto");
    var width=longest.mouseover().width();
    button.click();
    var innerButton = button.find(".ui-selectmenu-text");
    var paddingRight=parseFloat(innerButton.css("padding-right"));
    var paddingLeft=parseFloat(innerButton.css("padding-left"));
    var total=width+paddingLeft+paddingRight + 2;
    $this.selectmenu("option","width", total);
})

简而言之它的作用是：

打开菜单，以便填充和布置
找到最长的元素
将菜单宽度设置为auto，将鼠标悬停在最长元素上并获取其宽度
关闭菜单
获取按钮小部件的左右填充
将其添加到最长项目的计算宽度，并将其用作宽度
- 添加2个像素以获得良好的衡量标准（我认为它的边界或其他东西）

它只是在很大程度上依赖于jquery-ui如何在内部处理事务，所以它可能会在任何更新时中断。

看到这个小提琴：shape intersection

Answer 4

以前的解决方案几乎是正确的。

你必须设置css宽度并像这样调用 selectmenu ：

$('select').selectmenu({ width : $(this).css('width')});

Answer 5

百分比，如下所示：

在CSS中声明百分比：

 select{
    width: 100%;
 }

在你的JavaScript中：

jQuery("select").selectmenu(
        {
            width:  jQuery(this).attr("width"),
        }   
);

jquery ui selectmenu：如何正确设置动态宽度？

5 个答案: