我正在为我的投资组合网站使用Liquid Slider(Coda Slider的响应版本)。
其中一张幻灯片是项目/客户列表。当用户单击其中一个时,它们会停留在同一张幻灯片中,但列表会与项目详细信息交换。我的想法是通过将该幻灯片的内容与AJAX引入的另一个HTMLpage/div交换来减少加载时间。
问题是高度不能根据新内容进行调整。如果你向前滑动一次,然后向后滑动,高度就会调整。如果调整窗口大小,则高度也会随之调整。
$(document).ready( function () {
$("#dc3").click(function (){
$(".clientlist").hide().load('dc3.html').fadeIn('slow');
});
});
这对交换内容有效,但对调整高度无效。我尝试使用替换div的高度来设置高度:
$(document).ready( function () {
$("#dc3").click(function (){
$(".clientlist").hide().load('dc3.html').fadeIn('slow');
$(".liquid-slider").css({'height':($("#content").height()+'px')});
});
});
但这也没用。。。
我可以手动设置高度,但我更喜欢自动调整高度。滑块脚本中有一些adjustHeight函数,但我不确定在内容交换时如何调用它。
现场的集结区在这里。
有几种方法可以从滑块外部调用内部函数。您可能希望在ajax回调中调用adjustHeight()或adjustHeightNoAnimation()函数。看看本教程是否回答了您的问题,如果没有,请从LS网站上的联系表格中给我发一封电子邮件。
http://liquidslider.kevinbatdorf.com/tutorials/dynamically-add-content-to-a-panel-when-clicked-using-ajax/