我正在使用Jquery,fancybox,jScrollPane和Jquery Ui标签处理html视频库。 使用jquery ui将库分隔为选项卡,然后每个选项卡都托管一个jScrollPane。为了在重新调整窗口大小时保持数据大小调整,编写了一个函数来更改容器的css并重新初始化jscrollpanes。 jquery的代码如下:
$('.thumbNails').jScrollPane({});
$('.Captions').jScrollPane();
$(window).resize(function(){
$('.video__gallery_container').css('width',$(window).width()-40);
$('.thumbNails').css('width','95%');
$('.Captions').css('width','95%');
$('.thumbNails').jScrollPane().reinitialize();
$('.Captions').jScrollPane().reinitialize();
});
html: 视频库
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<link rel="stylesheet" type="text/css" href="includes/video_gallery_ie.css" />
<![endif]-->
</head>
<body>
<div id="tabs" class="video_gallery_container">
<ul>
<li><a href="#tabs-1" class="tab">All</a></li>
<li><a href="#tabs-2" class="tab">Pilots</a></li>
<li><a href="#tabs-3" class="tab">Pilots</a></li>
<li><a href="#tabs-4" class="tab">145 Repair Station</a></li>
<li><a href="#tabs-5" class="tab">Supply</a></li>
</ul>
<div id="tabs-1" class="thumbNails">
<a href="#" rel="tooltip" title="first tooltip" class="videoLink" videowidth="800" videoheight="450" videofile="cycling_large" videocaption="Caption for cycling_large goes here" ></a>
<a class="videoLink" videowidth="640" videoheight="360" videofile="ocean_medium" videocaption="Caption for ocean_medium goes here" ></a>
<a class="videoLink" videowidth="400" videoheight="250" videofile="winecountry_part1" videocaption="Caption for winecountry_part1 goes here"></a>
<a class="videoLink" videowidth="640" videoheight="402" videofile="winecountry_part2" videocaption="Caption for winecountry_part2 goes here"></a>
<a class="videoLink" videowidth="860" videoheight="540" videofile="winecountry_part3" videocaption="Caption for winecountry_part3 goes here"></a>
<a class="videoLink" videowidth="300" videoheight="168" videofile="cycling_small" videocaption="Caption for cycling_small goes here" ></a>
<div class="clear_both"></div></div>
<div id="tabs-2" class="thumbNails">
<a class="videoLink" videowidth="860" videoheight="540" videofile="winecountry_part3" videocaption="Caption for winecountry_part3 goes here"></a>
<a class="videoLink" videowidth="300" videoheight="168" videofile="cycling_small" videocaption="Caption for cycling_small goes here" ></a>
<div class="clear_both"></div></div>
<div id="tabs-3" class="thumbNails">
<a class="videoLink" videowidth="800" videoheight="450" videofile="cycling_large" videocaption="Caption for cycling_large goes here" ></a>
<a class="videoLink" videowidth="640" videoheight="360" videofile="ocean_medium" videocaption="Caption for ocean_medium goes here" ></a>
<div class="clear_both"></div></div>
<div id="tabs-4" class="thumbNails">
<a class="videoLink" videowidth="400" videoheight="250" videofile="winecountry_part1" videocaption="Caption for winecountry_part1 goes here"></a>
<a class="videoLink" videowidth="640" videoheight="402" videofile="winecountry_part2" videocaption="Caption for winecountry_part2 goes here"></a>
<a class="videoLink" videowidth="860" videoheight="540" videofile="winecountry_part3" videocaption="Caption for winecountry_part3 goes here"></a>
<div class="clear_both"></div></div>
<div id="tabs-5" class="thumbNails">
<a class="videoLink" videowidth="860" videoheight="540" videofile="winecountry_part3" videocaption="Caption for winecountry_part3 goes here"></a>
<a class="videoLink" videowidth="300" videoheight="168" videofile="cycling_small" videocaption="Caption for cycling_small goes here" ></a>
<div class="clear_both"></div></div>
<div class="Captions"></div>
</div>
<!-- Hidden DIV container for video overlay code -->
<div style="display: none;">
<div id="videoPlayer"></div>
</div>
<!-- Placed at the end of the document so the pages load faster-->
<script src="includes/bootstrap-tooltip.js"></script>
<script src="includes/bootstrap-popover.js"></script>
<script type="text/javascript" src="includes/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="includes/jquery.mousewheel.js"></script>
<link type="text/css" href="includes/jquery-ui-1.8.20.custom/css/vader/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script type="text/javascript" src="includes/jquery-ui-1.8.20.custom/js/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Tabs
$('#tabs').tabs();
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover');
});
});
</script>
</body>
</html>
现在问题的核心是,代码运行完美,直到调整窗口大小,调整大小后如果选择了选项卡,则不会显示选项卡的内容,但是如果随后调整窗口大小,则会显示内容。同样在调整大小后如果选择了另一个选项卡,您可以返回调整大小完成时加载的选项卡,但它仍然包含内容。我尝试用如下代码手动触发resize事件 $('。tab')。live('click',function(){$(this).trigger('resize');}; 谢谢你的帮助。