I have an application tha开发者_C百科t requires the use of a mootools calendar, however, I use jquery for my main app structure.
As soon as I have mootools in with jquery, neither work, and when I have only one, they work fine. I did some research saying I could use a method called .noconflict, and while i've tried, I have not gotten it to solve my issue. Perhaps someone could better explain to me where to do the actual .noconflict calls, and perhaps help me get this working.
Thanks!
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var fixHeight = function () {
var gutter = 50;
var newHeight = $(window).height() - (gutter*2);
$('#container').height(newHeight);
}
$(function(){
fixHeight();
$('ul#nav li.item').each(function(index) {
if ($(this).attr("name") == "media") {
$(this).attr("id","active");
}
});
$('input').focus(function() {
$(this).attr("value","");
}).blur(function() {
$(this).attr("value",$(this).attr("original-value"));
});
$(window).resize(function() {
fixHeight();
}).load(function() {
fixHeight();
});
});
</script>
<script type="text/javascript" src="http://taptouchclick.com/js/mootools-1.2.4-core-yc.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var smoothCalendar = new SmoothCalendar("calendar");
});
</script>
yes, the noConflict
method should work, but if it doesn't or if you want to do it in another way, you should encapsulate the scripts in self-calling functions with the parameter being set as the main library object:
(function($){
// al your jquery logic here
alert($ instanceof jQuery);
})(jQuery)
after that, you should include the next library(in your case MooTools) and write the script normally , or - to be very sure - you can encapsulate the MooTools logic in a function as well.
You should be fine if you simply call:
jQuery.noConflict();
...before including the Mootools JS file.
You can then use jQuery functions by using jQuery
instead of $
. Example:
jQuery('.selector').hide(); // instead of $('.selector').hide();
You can also pass $
back in through the DOM-ready event:
$.noConflict();
// Non-jQuery code goes here
jQuery(document).ready(function($) {
// You can now use the dollar sign safely inside of this function
}
精彩评论