jquery ui selectmenu: Dinamik genişliği nasıl doğru şekilde ayarlayabilirim?

Question

felixnagel'den jquery ui selectmenu'yu kullanmak istiyorum. çalışır ancak jquery'nin selectmenu için her zaman çok küçük bir genişlik ayarlaması problemi vardır, böylece açık/kapalı simgesi içeriğin üstünde görünür. Ben komut selectmenu() genişliğini ayarlayabildiğimi biliyorum ama birkaç farklı selectmenus var, bu yüzden ben seçim verebilecek ne kadar genişlikte doğru hesaplama üzerinde etkili olabileceğini bilmek istiyorum, böylece verebilirim genişlik için ek bir px.

Bunu .js dosyalarında bulmaya çalıştım, ancak şu andan beri bununla başarılı olmadım. Umarım birinizin burada ne yapabileceğime dair bir fikri vardır.

Ruven çok teşekkür ederim

Answer 1

Belki böyle bir şey size Her seçme elemanı yürümek

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


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

yardımcı olacak ve seçme içinde birlikte belirtmek possibilty olacak öğe genişliği özniteliği. Belki de yararlı buluyorsunuz ve bunu değiştirebiliyorsunuz.

Düzenleme 1: Ya da sadece kod ile ekstra bir şey eklemek istiyorsanız gibi bir şey kullanabilirsiniz (ben CSS ile de yapabilir misin):

<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

Önceki çözümler neredeyse bulmuşlar.

Sen css genişliğini ayarlayabilir ve bunun gibi selectmenu aramak zorunda:

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

Answer 3

Bu basit olduğunu ve içeriğine göre ayarlamak yapar.Bu açıklamada belirtilen genişlikleri farklı öğeleri seçerken sorunu önlemek için sabit kodlanmış genişliği kullanan

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

:

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

Answer 4

yüzdeleri için, şu şekildedir:

CSS'nizdeki yüzdeyi bildirin:

select{ 
    width: 100%; 
} 

Ve JavaScript'inizin:

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

Answer 5

Bir hack tür ve ben bunun ne kadar sağlam bilmiyorum ama başarıyla belirli bir durumda bu kullandım:

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

yılında ne yaptığını Özetle şudur: doldurulur ve dışarı atılır, böylece

• bulmak menüsünü açın en uzun eleman
• en uzun elemanın üzerine gelip almak için otomatik menü genişliğini ayarlamak onun genişliği
• menü kapatmak
• bilgisayarlı genişliğine eklemek düğme widget sol ve sağ dolgu olsun En uzun öğenin ve

0 (Ben sınırlar falan bir hak) genişliği olarak

• iyi ölçmek için 2 pikseller ekleyerek kullanan

  Sadece jQuery-ui'nin işleri dahili olarak nasıl yaptığına bağlı olduğundan, herhangi bir güncellemeye dayanabilir.

  Bu keman'a bakın: http://jsfiddle.net/txo1mvhn/2/