JQUERY UI Accordion Thay đổi kích thước trên cửa sổ Thay đổi kích thước?

Question

Tôi đang sử dụng các mô-đun jQuery UI Accordion:

<script type="text/javascript"> 
$(function() { 
    $("#sidebar_column_accordion").accordion({ 
     fillSpace: true, 
     icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } 
    }); 
}); 
</script> 

Bằng việc sử dụng tùy chọn fillSpace, accordion chiếm toàn bộ chiều cao của cửa sổ mà tôi muốn. Vấn đề là nó tính toán chiều cao khi tải trang và nếu người dùng thay đổi kích thước trình duyệt của họ, điều đó không điều chỉnh ...

Có cách nào để accordion tính toán lại chiều cao/kích thước khi cửa sổ trình duyệt được thay đổi kích cỡ không?

Cảm ơn

Answer 1

$(window).resize(function(){ 
    $("#sidebar_column_accordion").accordion("resize"); 
}); 

Trong jQuery UI 1.9 phương pháp thay đổi kích thước đã được gỡ bỏ. Phương thức làm mới được thêm vào mạnh mẽ hơn và cũng sẽ hoạt động trong trường hợp này.

$(window).resize(function(){ 
    $("#sidebar_column_accordion").accordion("refresh"); 
}); 

Answer 2

Nó trông như thế này đã được cập nhật để "refresh"

$(function() { 
$("#accordion").accordion({ 
heightStyle: "fill" 
}); 
}); 
$(function() { 
$("#accordion-resizer").resizable({ 
minHeight: 140, 
minWidth: 200, 
resize: function() { 
$("#accordion").accordion("refresh"); 
} 
}); 
}); 

Answer 3

Set autoHeight: 'nội dung' trong decalaration accordion. Điều này sẽ làm cho các div sử dụng chiều cao có nguồn gốc của nội dung:

$('#accordion').accordion({ 
    autoHeight: 'content' 
}); 

Xem ở đây để biết thêm: http://jqueryui.com/accordion/#no-auto-height

Answer 4

Các giải pháp khác được đăng không làm việc cho tôi, mặc dù họ đang ở rất gần.

Xác định accordion của bạn sử dụng heightStyle: điền, như vậy:

$("#sidebar_column_accordion").accordion({ 
        heightStyle: "fill" 
       }); 

Tạo một hàm để tính toán và thiết lập chiều cao. Lưu ý rằng tôi phải làm cả hai, thiết lập chiều cao và sau đó gọi refresh trên accordion. Người ta sẽ không làm việc mà không có người khác.

function calculateHeight(){ 
    var height = $('#maincontent').height(); // Or whatever height you want 
    $('#sidebar_column_accordion').height(height); 
    $('#sidebar_column_accordion').accordion("refresh"); 
} 

Gọi chức năng này trên cả tải trang và thay đổi kích thước cửa sổ.

calculateHeight(); 

$(window).resize(function() { 
    calculateHeight(); 
});