jquery conflict - how to use the jQuery.noConflict();_问答_开发者

I am using JQuery for some drop down nav functionality. Worked great. Now I just added the Cycle JQuery Plugin and I can only get one to work at a time depending on which order I list them in the head. I have read about the jQuery.noConflict(); function but not really sure where to put it. Here is what I got.

HTML

<head>
    <title>#</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <meta content="online restaurant employee scheduling, employee scheduling, scheduling software, employee scheduling software,   restaurant scheduling, restaurant scheduling software, restaurant schedules, restaurant employee scheduling, online scheduling, online scheduling software" name="keywords"/>
    <meta content=" easy-to-use, Web-based restaurant labor management solutions and workforce management software offers flexible, effective and improved communication for employees and managers." name="description"/>
    <meta content="index, follow" name="robots"/>
    <meta content="no-cache" http-equiv="cache-control"/>
    <meta content="no-store" http-equiv="cache-control"/>
    <meta content="0" http-equiv="expires"/>
    <meta content="no-cache" http-equiv="pragma"/>
    <meta content="Rh52pxT6lFEqOVMlSt7QpOVHb325OHdlGkWZ0QMUSbU" name="google-site-verification"/>

    <link rel="stylesheet" href="stylesheets/style.css" media="screen" />

    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.cycle.all.min.js" type="text/javascript"></script>
    <script src="js/menu.js" type="text/javascript"></script>
    &l开发者_运维问答t;script src="js/slideshow.js" type="text/javascript"></script>

</head>

When it is structured like this my Cycle Plugin works but not the nav drop downs. Here are the corresponding .js files with the nav being: menu.js and the Cycle Plugin being: slideshow.js

menu.js

$(document).ready(function () {   

    $('#nav li').hover(  
        function () {  
            //show its submenu  
            $('ul', this).slideDown(100);  
        },   
        function () {  
            //hide its submenu  
            $('ul', this).slideUp(100);           
        }  
    );  

});

slideshow.js

$('#slideshow').cycle({ 
   speed:      200,
   timeout:    0, 
   pager:      '#tabs', 
   pagerEvent: 'mouseover' 
});

From the documentation of noConflict():

NOTE: This function must be called after including the jQuery javascript file, but before including any other conflicting library, and also before actually that other conflicting library gets used, in case jQuery is included last. noConflict can be called at the end of the jQuery.js file to globally disable the $() jQuery alias.

Just add a script tag to your header after your jquery includes to run the noConflict() function (example taken from the "Using jQuery with noConflict" page):

<head>
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
     jQuery.noConflict();

     // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     });

     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>
 </head>

I can't see why you need jQuery.noConflict() which is to do with other scripts using the $ variable. See the documentation.

Instead, as Ryan says, you need to place your cycle code inside a $(document).ready(), so slideshow.js becomes:

$(document).ready(function () { 
    $('#slideshow').cycle({ 
        speed:      200,
        timeout:    0, 
        pager:      '#tabs', 
        pagerEvent: 'mouseover' 
    });
});

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script>jQuery.noConflict();</script>
<script src="js/jquery.cycle.all.min.js" type="text/javascript"></script>
<script src="js/menu.js" type="text/javascript"></script>
<script src="js/slideshow.js" type="text/javascript"></script>

menu.js:

(function($){
$(document).ready(function () {   

    $('#nav li').hover(  
        function () {  
            //show its submenu  
            $('ul', this).slideDown(100);  
        },   
        function () {  
            //hide its submenu  
            $('ul', this).slideUp(100);           
        }  
    );  

}); 
})(jQuery);

slideshow.js:

(function($){

 $('blah').cycle()
})(jQuery);

jquery conflict - how to use the jQuery.noConflict();

精彩评论

关注公众号

热门标签

图文推荐

jquery conflict - how to use the jQuery.noConflict();

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：