JQUERY UI Accordion调整窗口大小？

问题描述：

我使用jQuery UI手风琴模块：JQUERY UI Accordion调整窗口大小？

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

通过使用fillSpace选项，手风琴占据了我想要的窗口的整个高度。问题是它计算页面加载的高度，如果用户调整其浏览器，它不会调整...

有没有办法让浏览器窗口调整大小时手风琴重新计算高度/大小？

由于

答

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

在jQuery UI的1.9除去大小调整方法。刷新方法增加了，这更加健壮，并且在这种情况下也可以工作。

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

这似乎很容易！我今晚会尝试一下，然后回来。 thxs – AnApprentice 2010-03-11 19:59:13

你是否在某处找到了这个文档？我无法在任何地方找到？ – AnApprentice 2010-03-11 19:59:40

看起来不像文档显示，但演示源显示手风琴的resize方法的用户。 http://jqueryui.com/demos/accordion/#fillspace – PetersenDidIt 2010-03-11 20:51:39

答

它看起来像这样已经更新到 “刷新”

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

答

集autoHeight：手风琴decalaration '内容'。这将使格使用内容的原始高度：

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

这里看到更多的信息：http://jqueryui.com/accordion/#no-auto-height

答

发布对我来说没有工作的其他解决方案，但他们接近。

使用heightStyle定义你的手风琴：填写，就像这样：

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

创建一个函数来计算并设定高度。请注意，我必须同时做这两件事，设置高度，然后在手风琴上调用刷新。没有其他人就无法工作。

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

在页面加载和窗口调整大小调用此函数。

calculateHeight(); 

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

JQUERY UI Accordion调整窗口大小？

相关推荐