Question

我正在一个网站http://tapasya.co.in上工作，我刚刚制作了mootools幻灯片。但是我注意到我正在使用的菜单栏停止工作，它应该是水平下降但现在没有显示。我已经使用了jquery。请参阅网页的来源。可能是什么问题？ Mootools与javascript或其他一些问题相冲突。

如果我尝试使用$ .noConflict（），它会在脚本中抛出错误

Uncaught TypeError: Object function (B,C){if(B&&B.$family&&B.uid){return B}var A=$type(B);return($[A])?$[A](B,C,this.document):null} has no method 'noConflict'

我尝试了下面给出的解决方案。但它没有用。

    <script type="text/javascript" src="<%= ResolveUrl("~/Js/jquery-1.3.2.min.js") %>" ></script>
    <script type="text/javascript" src="<%= ResolveUrl("~/Scripts/SlideShow/js/mootools.js") %>"></script>
    <script type="text/javascript" src="<%= ResolveUrl("~/Scripts/SlideShow/js/slideshow.js") %>"></script>
    <script type="text/javascript" src="<%= ResolveUrl("~/Scripts/SlideShow/js/lightbox.js") %>"></script>

    <script type="text/javascript">
    // <![CDATA[
    $.noConflict();
        var timeout    = 500;
        var closetimer = 0;
        var ddmenuitem = 0;

        function ddmenu_open(){
            ddmenu_canceltimer();
            ddmenu_close();
            ddmenuitem = $(this).find('ul').css('visibility', 'visible');
        }

        function ddmenu_close(){ 
            if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
        }

        function ddmenu_timer(){
            closetimer = window.setTimeout(ddmenu_close, timeout);
        }

        function ddmenu_canceltimer(){  
            if(closetimer){  
                window.clearTimeout(closetimer);
                closetimer = null;
        }}

        $(document).ready(function(){  
            $('#ddmenu > li').bind('mouseover', ddmenu_open)
            $('#ddmenu > li').bind('mouseout',  ddmenu_timer)
        });

        document.onclick = ddmenu_close;
    // ]]>  
    </script>

    <script type="text/javascript">     
    //<![CDATA[
      window.addEvent('domready', function(){
        var data = {
          '1.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' }, 
          '2.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' }, 
          '3.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' }, 
          '4.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' }
        };

         // Note the use of "linked: true" which tells Slideshow to auto-link all slides to the full-size image.
         //http://code.google.com/p/slideshow/wiki/Slideshow#Options:
        var mootoolsSlideshow = new Slideshow('divbanner', data, {loader:true,captions: true, delay: 5000,controller: false, height: 370,linked: false, hu: '<%= ResolveUrl("~/Scripts/SlideShow/Images/") %>', thumbnails: true, width: 1002});
        // Here we create the Lightbox instance.
        // In this case we will use the "close" and "open" callbacks to pause our show while the modal window is visible.
    var box = new Lightbox({ 
              'onClose': function(){ this.pause(false); }.bind(mootoolsSlideshow), 
              'onOpen': function(){ this.pause(true); }.bind(mootoolsSlideshow) 
            });     
      });
    //]]>
    </script>

Answer 1

看起来好像你在MooTools和jQuery之间发生了冲突。 Firefox显示此错误。

$（document）.ready不是第40行的功能

MooTools使用$作为document.getElementById的指针。 jQuery扩展了$以及它自己的方法。看起来好像MooTools正在用jQuery覆盖$的声明，从而删除了'ready'方法。

要解决此问题，请仔细阅读本文http://mootools.net/blog/2009/06/22/the-dollar-safe-mode/

老实说，混合使用Javascript库并不是一个好主意。您最好的办法是找到一个预先存在的MooTools库来执行您新添加的jQuery库应该执行的任务。

Answer 2

<script type="text/javascript">


$.noConflict();
  jQuery(document).ready(function($) {
    // Code that uses jQuery's $ can follow here.
  });
  // Code that uses other library's $ can follow here.
</script>

Answer 3

经过大量的谷歌搜索，我终于得到了我的解决方案

看到这些变化，其余部分将保持不变

jQuery.noConflict();

    jQuery(document).ready(function($){  
        $('#ddmenu > li').bind('mouseover', ddmenu_open)
        $('

   <script type="text/javascript">
    // <![CDATA[
    jQuery.noConflict();

        jQuery(document).ready(function($){  
            $('#ddmenu > li').bind('mouseover', ddmenu_open)
            $('#ddmenu > li').bind('mouseout',  ddmenu_timer)

        var timeout    = 500;
        var closetimer = 0;
        var ddmenuitem = 0;

        function ddmenu_open(){
            ddmenu_canceltimer();
            ddmenu_close();
            ddmenuitem = $(this).find('ul').css('visibility', 'visible');
        }

        function ddmenu_close(){ 
            if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
        }

        function ddmenu_timer(){
            closetimer = window.setTimeout(ddmenu_close, timeout);
        }

        function ddmenu_canceltimer(){  
            if(closetimer){  
                window.clearTimeout(closetimer);
                closetimer = null;
        }}



        document.onclick = ddmenu_close;
        });
    // ]]>  
    </script>

    <script type="text/javascript">     
    //<![CDATA[
      window.addEvent('domready', function(){
        var data = {
          '1.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' }, 
          '2.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' }, 
          '3.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' }, 
          '4.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' }
        };

         // Note the use of "linked: true" which tells Slideshow to auto-link all slides to the full-size image.
         //http://code.google.com/p/slideshow/wiki/Slideshow#Options:
        var mootoolsSlideshow = new Slideshow('divbanner', data, {loader:true,captions: true, delay: 5000,controller: false, height: 370,linked: false, hu: '<%= ResolveUrl("~/Scripts/SlideShow/Images/") %>', thumbnails: true, width: 1002});
        // Here we create the Lightbox instance.
        // In this case we will use the "close" and "open" callbacks to pause our show while the modal window is visible.
    var box = new Lightbox({ 
              'onClose': function(){ this.pause(false); }.bind(mootoolsSlideshow), 
              'onOpen': function(){ this.pause(true); }.bind(mootoolsSlideshow) 
            });     
      });
    //]]>
    </script>

Refrence

Answer 4

<p>jQuery sets this paragraph's color to red but MooTools sets the border color.</p>
<script type="text/javascript" src="jquery-1.3.js"></script>
<script type="text/javascript">
    //no conflict jquery
    jQuery.noConflict();
    //jquery stuff
    (function($) {
        $('p').css('color','#ff0000');
    })(jQuery);
</script>
<script type="text/javascript" src="moo1.2.js"></script>
<script type="text/javascript">
    //moo stuff
    window.addEvent('domready',function() {
        $$('p').setStyle('border','1px solid #fc0');
    });
</script>

mootools幻灯片不使用JQuery。需要帮忙！

4 个答案:

mootools幻灯片不使用JQuery。需要帮忙 ！

4 个答案:

mootools幻灯片不使用JQuery。需要帮忙！