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

Question

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

我尝试在 .js 文件中找到它，但从现在起我没有成功找到它。希望你们中有人知道我可以在这里做什么。

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")})
    })
})

您遍历每个选择元素，您将可以在选择元素宽度属性中指定 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);
})

简而言之，它的作用是：

• 打开菜单，将其填满并布局
• 找到最长的元素
• 将菜单宽度设置为自动，将鼠标悬停在最长的元素上并获取其宽度
• 关闭菜单
• 获取按钮小部件的左右内边距
• 将其添加到最长项目的计算宽度中，并将其用作宽度
  • 添加 2 个像素以达到良好的测量效果（我认为是边框或其他东西）

只是它在很大程度上依赖于 jquery-ui 内部的工作方式，因此它可能会在任何更新时中断。

看到这个小提琴：http://jsfiddle.net/txo1mvhn/2/

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"),
        }   
);