2013-06-01 3 views
0

У меня возник конфликт между jquery и прототипом.JQuery и прототип noconflict

HTML 

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Nor-Avetisyan</title> 
     <link rel="stylesheet" type="text/css" href="views/css/style.css" /> 
     <link rel="stylesheet" href="views/css/calendarview.css"> 
     <script src="views/js/jquery-2.0.1.min.js"></script> 
     <script>jQuery.noConflict();</script> 
     <script src="views/js/prototype.js"></script> 
     <script src="views/js/calendarview.js"></script> 
     <script> 
      function setupCalendars() { 
       // Embedded Calendar 
       Calendar.setup(
         { 
          dateField: 'embeddedDateField', 
          parentElement: 'embeddedCalendar' 
         } 
       ) 

       // Popup Calendar 
       Calendar.setup(
         { 
          dateField: 'popupDateField', 
          triggerElement: 'popupDateField' 
         } 
       ) 
      } 

      Event.observe(window, 'load', function() { 
       setupCalendars() 
      }) 
     </script> 
    </head> 
    <body> 
     <div id="site-page"> 
      <div id="site-under-header"> 
       <a class="flag-arm" href="#"></a> 
       <a class="flag-en" href="#"></a> 
       <div class="clear"></div> 
      </div> 
      <div id="site-header"> 
       <div id="site-header-center"></div> 
      </div> 
      <div id="site-content-container"> 
       <div id="site-menu"> 
        <a id="menu-glxavor" href="#"></a> 
        <a id="menu-mermasin" href="#"></a> 
        <a id="menu-usucich" href="#"></a> 
        <a id="menu-ashakert" href="#"></a> 
        <a id="menu-shrjanavartner" href="#"></a> 
        <a id="menu-norutyunner" href="#"></a> 
        <a id="menu-mankapartez" href="#"></a> 
        <a id="menu-nyuter" href="#"></a> 
        <a id="menu-bajanortagrvel" href="#"></a> 
       </div> 
       <div id="site-content"> 
        <div id="site-content-left"> 
         <h1>ՆՈՐ ԿԱՌՈՒՑՎՈՂ ԴՊՐՈՑԱՇԵՆՔ</h1> 
         <div id="site-content-dproc"> 
          <div id="corner-calq"><div><a href="#">Ավելին</a></div></div> 
         </div> 
        </div> 
        <div id="site-content-right"> 
         <div id="embeddedExample" style=""> 
          <div id="embeddedCalendar" style="margin-left: auto; margin-right: auto"> 
          </div> 
         </div> 
         <div id="site-content-ushadrutyun"> 
          Հատուկ ուշադրության 
          արժանի 
          հայտարարությունների 
          նյութերի համար 
         </div> 
        </div> 
        <div style="clear:left;"></div> 
        <div id="site-content-news"> 
         <h1>ՆՈՐՈՒԹՅՈՒՆՆԵՐ</h1> 
         <div class="site-news-grey"> 
          1 
         </div> 
         <div class="site-news-grey"> 
          2 
         </div> 
         <div class="clear"></div> 
         <div class="site-news-grey"> 
          3 
         </div> 
         <div class="site-news-grey"> 
          4 
         </div> 
        </div> 
        <div id="site-content-social"> 
         <a id="social-twitter" href="#"></a> 
         <a id="social-youtube" href="#"></a> 
         <a id="social-facebook" href="#"></a> 
         <a id="social-google" href="#"></a> 
         <a id="social-dasaran" href="#"></a> 
        </div> 
       </div> 
       <div class="clear"></div> 
       <a id="kap" href="#"></a> 
       <div id="site-footer"> 
        <div> 
         «Հայ կրթություն» կրթական հիմնադրամ 
         Երևան Հարավ-Արևմտյան Ա1 թաղամաս, Օհանով 20 Հեռ. 72 84 40 
        </div> 
       </div> 
      </div> 
     </div> 
     <script> 
      $('#corner-calq').hide(); 
      $('#site-content-dproc').mouseover(function() { 
       $('#corner-calq').fadeIn(1000); 
      }); 
      $('#site-content-dproc').mouseout(function() { 
       $('#corner-calq').fadeOut(1000); 
      }); 
     </script> 
    </body> 
</html> 

Console Ошибка: Uncaught TypeError: Невозможно вызвать метод 'скрыть' нулевых

я поставил jQuery.noConflict(); но никакого эффекта.

Можете ли вы разместить любые решения для этого?

ответ

2

jQuery.noConflict() не какая-то волшебная пыль, которая некоторыми таинственными силами устраняет конфликты между библиотеками. Его цель совершенно ясна: 1) восстановить исходное значение глобальной переменной $, и, необязательно, 2) ввести другой псевдоним, который будет использоваться вместо jQuery.

Что вы, возможно, потребуется сделать следующее:

<script src="views/js/prototype.js"></script> 
<script src="views/js/jquery-2.0.1.min.js"></script> 
<script>var jQ = jQuery.noConflict();</script> 

Затем вы можете использовать эту переменную jQ, как вы использовали $:

jQ('#corner-calq').hide(); 
jQ('#site-content-dproc').mouseover(function() { 
    jQ('#corner-calq').fadeIn(1000); 
}); 
jQ('#site-content-dproc').mouseout(function() { 
    jQ('#corner-calq').fadeOut(1000); 
}); 

Хотя я бы, наверное, предпочел оставить код как, впрочем, просматривая его в анонимной функции самозапуска.

(function($) { 
    $('#corner-calq').hide(); 
    $('#site-content-dproc').mouseover(function() { 
     $('#corner-calq').fadeIn(1000); 
    }); 
    $('#site-content-dproc').mouseout(function() { 
     $('#corner-calq').fadeOut(1000); 
    }); 
})(jQuery); 
+0

Теперь я получаю то, что не делает. Спасибо raina77ow! :) –

Смежные вопросы