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