jquery ui selectmenu: Come posso impostare correttamente la larghezza dinamica?

Question

mi piacerebbe usare jquery ui selectmenu di felixnagel. funziona ma ho il problema che jquery imposta sempre una larghezza troppo piccola per il menu di selezione in modo che l'icona di apertura/chiusura appaia sopra il contenuto. So che posso impostare la larghezza nel comando selectmenu() ma ho un paio di diversi selectmenus, quindi vorrei sapere dove posso influenzare il calcolo corretto quanto sarà ampio il menu di selezione, in modo che io possa dare un ulteriore px per la larghezza.

Ho cercato di trovarlo nei file .js, ma da quel momento non ci sono riuscito. Spero che qualcuno di voi abbia un'idea di quello che posso fare qui.

vi ringrazio molto

Ruven

Answer 1

Forse qualcosa di simile questo vi aiuterà a

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


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

Si cammina attraverso ogni elemento di selezione e si avrà la possibilità di specificare il con nella select attributo larghezza elementi. Forse lo trovi utile e puoi modificarlo in modo da soddisfare le tue esigenze.

Edit 1: O se volete semplicemente aggiungere qualcosa in più attraverso il codice (credo che si può fare anche con i CSS) si potrebbe usare qualcosa come:

<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

soluzioni precedenti erano quasi giusto.

È necessario impostare la larghezza css e chiamare Selezionare Menu come questo:

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

Answer 3

Questo è semplice e rende più regolare in base al contenuto.

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

Questo utilizza una larghezza hard coded per evitare il problema quando la selezione di elementi di diversa larghezza menzionati nel commento:

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

Answer 4

Per percentuali, è come segue:

Dichiara la percentuale nel tuo CSS:

select{ 
    width: 100%; 
} 

E nel tuo JavaScript:

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

Answer 5

E 'una specie di hack e io non so come questo è robusto ma ho usato con successo questo in un caso particolare:

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

In poche parole ciò che fa è:

• aprire il menu in modo che sia riempito e disposto
• trovarlo s elemento più lungo
• impostare la larghezza del menu su auto, passa il mouse sopra l'elemento più lungo e ottenere la sua larghezza
• chiudere il menu
• ottenere la sinistra e l'imbottitura destra del widget tasto
• aggiungere che alla larghezza calcolata della voce più lunga e utilizzarlo come la larghezza
  • l'aggiunta di 2 pixel per buona misura (penso che sia i bordi o qualcosa del genere)

È solo che si basa in gran parte su come jquery-ui fa le cose internamente in modo che possa interrompere qualsiasi aggiornamento.

Vai a questa violino: http://jsfiddle.net/txo1mvhn/2/