jquery ui selectmenu: मैं गतिशील चौड़ाई को सही तरीके से कैसे सेट करूं?

Question

मैं felixnagel से jquery ui selectmenu का उपयोग करना चाहता हूं। यह काम करता है लेकिन मुझे समस्या है कि jquery हमेशा selectmenu के लिए बहुत छोटी चौड़ाई निर्धारित करता है ताकि सामग्री के ऊपर खुला/बंद आइकन दिखाई दे। मुझे पता है कि मैं selectmenu() में चौड़ाई निर्धारित कर सकता हूं लेकिन मेरे पास दो अलग-अलग चयनमेन हैं, इसलिए मैं जानना चाहता हूं कि सही गणना पर मैं कहां प्रभाव डाल सकता हूं कि चयनमेनू कितना व्यापक होगा, ताकि मैं दे सकूं यह चौड़ाई के लिए एक अतिरिक्त पीएक्स है।

मैंने इसे .js फ़ाइलों में खोजने की कोशिश की, लेकिन अब से मैं इसके साथ सफल नहीं था। उम्मीद है कि आप में से किसी को पता है कि मैं यहां क्या कर सकता हूं।

आपको बहुत बहुत धन्यवाद

Ruven

Answer 1

हो सकता है कि कुछ इस तरह आप

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


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

आप हर चयन तत्व के माध्यम से चलना में मदद मिलेगी और आप संभावना चयन में साथ निर्दिष्ट करना होगा तत्व चौड़ाई विशेषता। हो सकता है कि आप इसे उपयोगी पाते हैं और इसे संशोधित कर सकते हैं ताकि यह आपकी आवश्यकताओं को भर सके।

संपादित करें 1: या यदि आपने अभी कुछ कोड के माध्यम से अतिरिक्त जोड़ना चाहते हैं (मुझे लगता है कि आप सीएसएस के साथ भी यह कर सकते हैं) आप की तरह कुछ इस्तेमाल कर सकते हैं:

<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

पिछला समाधान लगभग सही थे।

आप सीएसएस चौड़ाई सेट और selectmenu इस तरह कॉल करनी होगी:

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

Answer 3

यह सरल है और यह सामग्री के आधार पर समायोजित कर देता है।

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

यह एक कठिन कोडित चौड़ाई का उपयोग करता है जब टिप्पणी में आपका उल्लेख अलग चौड़ाई की वस्तुओं का चयन समस्या से बचने के:

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

Answer 4

प्रतिशत के लिए, इस तरह है:

अपने सीएसएस में प्रतिशत घोषित:

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

में संक्षेप यह क्या करता है:

• मेनू खोलने इतना है कि यह भरा है और खर्च की गई थी
• इसे खोजने रों सबसे लंबे समय तक तत्व
• ऑटो के लिए मेनू चौड़ाई सेट, सबसे लंबे समय तक तत्व पर जाएँ और मिल इसकी चौड़ाई
• मेनू को बंद
• छोड़ दिया और बटन विजेट का सही गद्दी
• गणना चौड़ाई है कि जोड़ने के लिए लिंक सबसे लंबे समय तक आइटम के हैं और उसका उपयोग चौड़ाई के रूप में
  • अच्छा उपाय 2 पिक्सेल जोड़ने (मुझे लगता है कि सीमाओं या कुछ)

यह सिर्फ इतना है कि इस तरह की भारी निर्भरता है कि jquery-ui आंतरिक रूप से चीजें कैसे करता है ताकि यह किसी भी अद्यतन को तोड़ सके।

यह पहेली देखें: http://jsfiddle.net/txo1mvhn/2/