jQuery文档准备好与窗口加载冲突了吗? [英] jQuery document ready conflicting with window onload?
问题描述
我正在尝试一起破解视频库.我正在使用jQuery制作滑出面板 这很简单.我还使用jQuery滚动缩略图.他们俩的工作都很漂亮.问题是我需要滚动缩略图才能在滑出面板内工作，但不需要.我认为这与两个功能有关:文件准备就绪，另一个与窗口加载有关.我不确定原因，因为我是jQuery新手.有人能帮忙吗.
I am trying to hack together a video gallery. I am using jQuery to make a slide out panel which is simple. I am also using jQuery for scrolling thumbnails. They both work beautifully. The problem is that I need the scrolling thubmnails to work inside the slide out panel but it won't. I think it has to do with the two functions on being document ready and the other being window onload. I'm not sure cause I am new to jQuery. Can any one help with this.
这是滑出面板功能.
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
她是滚动功能.
<script>
jQuery.noConflict()
(function($){
window.onload=function(){
$("#tS2").thumbnailScroller({
scrollerType:"clickButtons",
scrollerOrientation:"horizontal",
scrollSpeed:2,
scrollEasing:"easeOutCirc",
scrollEasingAmount:600,
acceleration:4,
scrollSpeed:800,
noScrollCenterSpace:10,
autoScrolling:0,
autoScrollingSpeed:2000,
autoScrollingEasing:"easeInOutQuad",
autoScrollingDelay:500
});
}
})(jQuery);
</script>
任何人都可以在这里看到任何会相互冲突的东西吗?
Can anyone see anything here that would conflict with each other?
这是整个html.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertical Sliding Info Panel With jQuery</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link href="jquery.thumbnailScroller.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="jquery-ui-1.8.13.custom.min.js"></script>
<script>
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
</head>
<body>
<div class="panel">
<div>
<div id="tS2" class="jThumbnailScroller">
<div class="jTscrollerContainer">
<div class="jTscroller">
<a href="#"><img src="thumbs/img1.jpg" /></a>
<a href="#"><img src="thumbs/img2.jpg" /></a>
<a href="#"><img src="thumbs/img3.jpg" /></a>
<a href="#"><img src="thumbs/img4.jpg" /></a>
<a href="#"><img src="thumbs/img5.jpg" /></a>
<a href="#"><img src="thumbs/img6.jpg" /></a>
<a href="#"><img src="thumbs/img7.jpg" /></a>
<a href="#"><img src="thumbs/img8.jpg" /></a>
<a href="#"><img src="thumbs/img9.jpg" /></a>
<a href="#"><img src="thumbs/img10.jpg" /></a>
<a href="#"><img src="thumbs/img11.jpg" /></a>
<a href="#"><img src="thumbs/img12.jpg" /></a>
<a href="#"><img src="thumbs/img13.jpg" /></a>
<a href="#"><img src="thumbs/img14.jpg" /></a>
<a href="#"><img src="thumbs/img15.jpg" /></a>
<a href="#"><img src="thumbs/img16.jpg" /></a>
<a href="#"><img src="thumbs/img17.jpg" /></a>
<a href="#"><img src="thumbs/img18.jpg" /></a>
<a href="#"><img src="thumbs/img19.jpg" /></a>
<a href="#"><img src="thumbs/img20.jpg" /></a>
</div>
</div>
<a href="#" class="jTscrollerPrevButton"></a>
<a href="#" class="jTscrollerNextButton"></a>
</div>
<!-- thumbnail scroller markup end -->
<script>
/* jQuery.noConflict() for using the plugin along with other libraries.
You can remove it if you won't use other libraries (e.g. prototype, scriptaculous etc.) or
if you include jQuery before other libraries in yourdocument's head tag.
[more info: http://docs.jquery.com/Using_jQuery_with_Other_Libraries] */
jQuery.noConflict();
/* calling thumbnailScroller function with options as parameters */
(function($){
window.onload=function(){
$("#tS2").thumbnailScroller({
scrollerType:"clickButtons",
scrollerOrientation:"horizontal",
scrollSpeed:2,
scrollEasing:"easeOutCirc",
scrollEasingAmount:600,
acceleration:4,
scrollSpeed:800,
noScrollCenterSpace:10,
autoScrolling:0,
autoScrollingSpeed:2000,
autoScrollingEasing:"easeInOutQuad",
autoScrollingDelay:500
});
}
})(jQuery);
</script>
<!-- thumbnailScroller script -->
<script src="jquery.thumbnailScroller.js"></script>
</div>
</div>
<a class="trigger" href="#">infos</a>
</body>
</html>
推荐答案
thumbnailScroller插件似乎需要计算拇指包装的尺寸.在您的情况下，包装器最初不会显示，并且可能会使插件感到困惑.
The thumbnailScroller plugin seems to need to calculate the dimensions of the wrapper of the thumbs. In your case, the wrapper is initially not displayed and it may get the plugin confused.
仅在执行插件后，您才可以尝试隐藏.panel元素.
You could try to hide the .panel element only after having executed the plugin.
jQuery.noConflict();
/* calling thumbnailScroller function with options as parameters */
(function($){
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
window.onload=function(){
$("#tS2").thumbnailScroller({
scrollerType:"clickButtons",
scrollerOrientation:"horizontal",
scrollSpeed:2,
scrollEasing:"easeOutCirc",
scrollEasingAmount:600,
acceleration:4,
scrollSpeed:800,
noScrollCenterSpace:10,
autoScrolling:0,
autoScrollingSpeed:2000,
autoScrollingEasing:"easeInOutQuad",
autoScrollingDelay:500
});
// Hide the .panel only now :
$(".panel").hide();
};
})(jQuery);
(您需要修改CSS，以便最初显示.panel)
(You'll need to modify you CSS so that the .panel is initially displayed)
这篇关于jQuery文档准备好与窗口加载冲突了吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
