jquery ui selectmenu : 어떻게 동적 너비를 올바르게 설정합니까?

Question

나는 felixnagel에서 jquery UI selectmenu를 사용하고 싶습니다. 그것은 작동하지만 jquery 항상 너무 작은 열을 설정 메뉴에 대한 열거 나 닫는 아이콘을 내용 위에 나타납니다 문제가 있습니다. 나는 selectmenu() 명령에서 너비를 설정할 수 있지만 여러 selectmenus가 있다는 것을 알고 있으므로 selectmenu가 얼마나 넓어야 올바른 계산에 영향을 줄 수 있는지 알고 싶습니다. 그래서 내가 줄 수 있습니다. 그것 너비에 대한 추가 px.

.js 파일에서 찾으려고했지만 지금은 성공하지 못했습니다. 바라건실 당신의 누군가가 내가 여기서 할 수있는 생각이 있습니다.

는

Ruven에게 대단히 감사합니다

Answer 1

어쩌면 이런 일이 당신에게 당신은 모든 선택 요소를 통해 걸어

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


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

도움이 될 것입니다 그리고 당신은 선택에로를 지정하는 사용되고 있습니다 것입니다 요소 너비 특성. 어쩌면 당신은 그것을 유용하다고 생각하고 그것이 당신의 필요를 채울 수 있도록 수정할 수 있습니다.

편집 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 2

이전 솔루션은 거의 옳았을.

당신은 CSS의 폭을 설정하고이 같은 selectmenu 전화를해야 :

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

Answer 3

이 간단하고 내용에 따라 조정한다.이 메모에서 설명한 다른 폭의 항목을 선택하면 이러한 문제를 방지하기 위해 하드 코딩 된 폭을 사용

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

:

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

Answer 4

비율 내용이 같다 :

귀하의 CSS에서 비율을 선언하십시오 :

select{ 
    width: 100%; 
} 

그리고 당신의 자바 스크립트 :

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

Answer 5

그것은 해킹의 종류의 난이 얼마나 강력한 모르지만 성공적으로 하나 개의 특정 인스턴스에서이를 사용했습니다 :

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

에서 그것이 무엇 간단히 말해서이다 : 그것은 가득 배치되도록

이

• 는
• 찾을 메뉴를 엽니 다 가장 긴 요소
• 가장 긴 요소 위에 마우스를 얻을, 자동으로 메뉴 폭을 설정 폭
• 메뉴를 닫습니다
• 이 계산 된 폭이 추가 버튼 위젯의 왼쪽과 오른쪽 패딩을 얻을 가장 긴 항목과

0 (나는 그것을 경계 또는 뭔가 생각) 폭과

• 가 좋은 측정을 위해 2 개 픽셀을 추가하는 것을 사용

  jquery-ui가 내부적으로 일을 수행하는 방식에 의존하기 때문에 업데이트가 중단 될 수 있습니다.

  이 부분을 참조하십시오.