jquery ui selectmenu: Làm thế nào để tôi đặt độ rộng động chính xác?

Question

tôi muốn sử dụng jquery ui selectmenu từ felixnagel. nó hoạt động nhưng tôi có vấn đề mà jquery luôn đặt một chiều rộng quá nhỏ cho selectmenu sao cho biểu tượng mở/đóng xuất hiện phía trên nội dung. Tôi biết rằng tôi có thể thiết lập chiều rộng trong lệnh selectmenu() nhưng tôi có một vài lựa chọn khác nhau, vì vậy tôi muốn biết nơi tôi có thể ảnh hưởng đến việc tính toán độ rộng của selectmenu, để tôi có thể nó là một px bổ sung cho chiều rộng.

Tôi đã cố gắng tìm nó trong tệp .js, nhưng kể từ bây giờ tôi đã không thành công với nó. Hy vọng rằng một người nào đó của bạn có một ý tưởng những gì tôi có thể làm ở đây.

thank you very much

Ruven

Answer 1

Có lẽ một cái gì đó như thế này sẽ giúp bạn

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


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

Bạn đi qua tất cả các yếu tố lựa chọn và bạn sẽ có khả năng để xác định với trong chọn thuộc tính chiều rộng phần tử. Có thể bạn thấy nó hữu ích và có thể sửa đổi nó để nó đáp ứng nhu cầu của bạn.

Sửa 1: Hoặc nếu bạn chỉ muốn thêm một cái gì đó thêm thru mã (tôi nghĩ bạn có thể làm điều đó cũng với CSS), bạn có thể sử dụng một cái gì đó như:

<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

giải pháp trước đã gần như ngay.

Bạn phải thiết lập chiều rộng css và gọi Chọn Menu như thế này:

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

Answer 3

này đơn giản và làm cho nó điều chỉnh dựa trên nội dung.

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

này sử dụng một chiều rộng cứng mã hoá để tránh vấn đề khi lựa chọn các mặt hàng của độ rộng khác nhau được đề cập trong bình luận:

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

Answer 4

Đối tỷ lệ, là như thế này:

Khai báo tỷ lệ phần trăm trong CSS của bạn:

select{ 
    width: 100%; 
} 

Và trong JavaScript:

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

Answer 5

Đó là loại một hack và tôi không biết làm thế nào mạnh mẽ này là nhưng tôi đã sử dụng thành công này trong một trường hợp cụ thể:

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

Trong Tóm lại những gì nó làm là:

• mở menu để nó được lấp đầy và đặt ra
• thấy nó s yếu tố dài nhất
• thiết lập độ rộng menu để ô tô, di chuột qua các yếu tố dài nhất và nhận được nó rộng
• đóng menu
• lấy trái và đệm bên phải của widget nút
• thêm rằng để chiều rộng tính của mặt hàng đó dài nhất và sử dụng như chiều rộng
  • thêm 2 pixel cho biện pháp tốt (tôi nghĩ đó là biên giới hoặc một cái gì đó)

Nó chỉ là loại phụ thuộc rất nhiều vào cách jquery-ui làm những việc nội bộ để nó có thể phá vỡ khi cập nhật bất kỳ.

Xem mục này: http://jsfiddle.net/txo1mvhn/2/