Jquery And Mootools, .noConflict is failing

问题:

I have an application that 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>

回答1:

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();

回答2:

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.

回答3:

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
}