JQuery UI Selectmenu: Как правильно установить динамическую ширину?

Question

Я хотел бы использовать jquery ui selectmenu от felixnagel. это работает, но у меня проблема в том, что jquery всегда устанавливает слишком маленькую ширину для меню выбора, так что над содержимым появляется значок открытия / закрытия. Я знаю, что могу установить ширину в команде selectmenu (), но у меня есть пара различных selectmenus, поэтому я хотел бы знать, где я могу повлиять на правильный расчет, насколько широким будет selectmenu, чтобы я мог дать это дополнительный пиксель для ширины.

Я пытался найти его в файлах .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")})
    })
})

Вы пройдете через каждый элемент select и у вас будет возможность указать значение with в атрибуте width элементов select.Может быть, вы найдете это полезным и можете изменить его так, чтобы он соответствовал вашим потребностям.

Редактировать 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:

 select{
    width: 100%;
 }

И в вашем JavaScript:

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

Answer 5

Предыдущие решения были почти правильными.

Вы должны установить ширину CSS и вызвать selectmenu следующим образом:

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