有人能一劳永逸地向我解释jQuery无冲突模式吗。根据我所读到的内容,它将解决jquery脚本冲突的问题,但我不确定如何实现它,以及它正在解决什么冲突?
我在这里使用了很多脚本,这些脚本随着时间的推移而积累起来。然而,现在有点混乱,我想知道是否有人能建议我如何解决脚本之间的任何冲突问题。
目前,"日期选择器"脚本无法工作。然而,如果我把"日期选择器"移到页面的更上方,它确实有效,但其他东西不行,我已经尝试了每种组合,无法同时让所有脚本都有效。
以下是我所有的脚本(我删除了任何html或css,因为我想让它尽可能清晰)。也许有些可以组合在一起,让一切变得更整洁?jQuery冲突模式能解决这些冲突问题吗?
我的代码如下:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="/scripts/libs/modernizr-2.5.3.min.js"></script>
<script src="/imageswapaudio.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.menuitem img').animate({width: 155, 'padding-top' : 100}, 0);
$('.menuitem').mouseover(function(){
gridimage = $(this).find('img');
gridimage.stop().animate({width: 200, 'padding-top': 0}, 500);
}).mouseout(function(){
gridimage.stop().animate({width: 155, 'padding-top': 100}, 300);
});
});
</script>
<script src="colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
//Examples of how to assign the Colorbox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"auto"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
$('.non- retina').colorbox({rel:'group5', transition:'none'})
$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-32843811-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script>
$(document).ready(function(){
// at first hide divs
$(".slidingDiv").hide();
$(".slidingDiv2").hide();
$(".slidingDiv3").hide();
$(".slidingDiv4").hide();
$(".slidingDiv5").hide();
$(".slidingDiv6").hide();
$(".slidingDiv7").hide();
$(".slidingDiv8").hide();
$(".slidingDiv9").hide();
$(".slidingDiv10").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
return false;
});
$('.first_s').live('click', function(){
$(".slidingDiv2").slideToggle();
return false;
})
$('.second_s').live('click', function(){
$(".slidingDiv3").slideToggle();
return false;
})
$('.third_s').live('click', function(){
$(".slidingDiv4").slideToggle();
return false;
})
$('.fourth_s').live('click', function(){
$(".slidingDiv5").slideToggle();
return false;
})
$('.fifth_s').live('click', function(){
$(".slidingDiv6").slideToggle();
return false;
})
$('.sixth_s').live('click', function(){
$(".slidingDiv7").slideToggle();
return false;
})
$('.seventh_s').live('click', function(){
$(".slidingDiv8").slideToggle();
return false;
})
$('.eighth_s').live('click', function(){
$(".slidingDiv9").slideToggle();
return false;
})
$('.ninth_s').live('click', function(){
$(".slidingDiv10").slideToggle();
return false;
})
});
</script>
<script src="http://www.paycoservices.co.uk/js/dpicker.js"></script>
<script src="http://www.paycoservices.co.uk/js/dpicker-ui.js"></script>
<script>
$(function() {
$( "#datepicker, #datepicker2" ).datepicker({
changeMonth: true,
changeYear: true
});
});
</script>
<script src="jsImgSlider/themes/3/js-image-slider.js" type="text/javascript"></script>
以下是我在运行Chrome浏览器控制台时遇到的错误:
GET http://www.paycoservices.co.uk/ahkerrigan-light-webfont.woff 404 (Not Found) Simply- Umbrella-Registration.asp:215
Resource interpreted as Font but transferred with MIME type application/octet-stream: "http://www.paycoservices.co.uk/ahkerrigan-light-webfont.ttf". Simply-Umbrella- Registration.asp:839
GET http://www.paycoservices.co.uk/pt_sans-web-bold-webfont.woff 404 (Not Found) Simply- Umbrella-Registration.asp:450
Resource interpreted as Font but transferred with MIME type application/octet-stream: "http://www.paycoservices.co.uk/pt_sans-web-bold-webfont.ttf". Simply-Umbrella- Registration.asp:839
GET http://www.paycoservices.co.uk/onlineforms/webform/scripts/wufoo.js 404 (Not Found) Simply-Umbrella-Registration.asp:839
1. Uncaught TypeError: Object [object Object] has no method 'datepicker' Simply-Umbrella- Registration.asp:163
[cycle] terminating; zero elements found by selector
$
的全局变量的情况。在这种情况下,jQuery.noConflict()
将$
值更改回由其他库提供的旧值,并且您必须使用代码中的变量jQuery
而不是$
来使用jQuery函数。
话虽如此,如果您包含了另一个提供$
变量的库,那么无冲突模式可能会有所帮助,您必须将$
的所有用法重写为jQuery
。
我决定选择一个非常简单的日期选择器,它不会回复任何内容,所以选择了这个,它与我的其他脚本配合得很好。http://www.splinter.com.au/javascript-date-picker-that-doesnt-sucktm/
只需知道,一旦使用此jQuery.noConflict()
,就会忘记使用$访问Jquery。因此,与其做$('div')
之类的事情,不如做jQuery('div')