Question

我为html页面添加了3个jqueryscripts（一个用于图库的colorbox插件，一个用于预订表单的弹出插件和一个用于页脚的滑动jquery。在添加这三个插件时，弹出关闭按钮不起作用，或者colorbox不工作。我已经尝试了所有的方法，但没有用...我在这里添加脚本..

<link href="02/css/login Popup/popup.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="02/js/Login pop_up/jquery.min.js"></script>


   <script type="text/javascript">

   $(document).ready(function() {
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size

//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value

//Fade in the Popup and add close button
  $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#"   class="close"><img src="02/images/close1.png" class="btn_close1" title="Close Window"    alt="Close" /></a>');

//Define margin for center alignment (vertical   horizontal) - we add 80px to the  height/width to accomodate for the padding  and border width defined in the css
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;

//Apply Margin to Popup
$('#' + popID).css({
    'margin-top' : -popMargTop,
    'margin-left' : -popMargLeft
});

//Fade in Background
 $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
 $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies 

return false;
   });

   //Close Popups and Fade Layer
 $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
   $('#fade , .popup_block').fadeOut(function() {
    $('#fade, a.close').remove();  //fade them both out
});
return false;
 });
 });

 </script>

  <!---Popup plugin ending---> 



   <!---Slider plugin starting---> 

 <script type="text/javascript" src="slide/jquery-1.3.1.min.js"></script>

 <script type="text/javascript" src="slide/jquery.scrollTo.js"></script>



   <script>



    $(document).ready(function() {



$('a.panel').click(function () {



    $('a.panel').removeClass('selected');

    $(this).addClass('selected');



    current = $(this);



    $('#wrapper').scrollTo($(this).attr('href'), 800);      



    return false;

});



$(window).resize(function () {

    resizePanel();

});



     });



     function resizePanel() {



width = $(window).width();

height = $(window).height();



mask_width = width * $('.item').length;



$('#debug').html(width  + ' ' + height + ' ' + mask_width);



$('#wrapper, .item').css({width: width, height: height});

$('#mask').css({width: mask_width, height: height});

$('#wrapper').scrollTo($('a.selected').attr('href'), 0);



        }



        </script>

               <!---Slider plugin ending---> 

       <!---Colorbox plugin starting--->


        <link rel="stylesheet" href="css/colorbox.css" />
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
           <script src="plugins/jquery.colorbox.js"></script>
         <script src="plugins/colorbox-main.js" type="text/javascript"></script>
         <script src="plugins/jquery.colorbox-min.js" type="text/javascript"></script>

         <!---Colorbox plugin ending--->

Answer 1

真正的问题是你想要的插件需要不同版本的jQuery：你说弹出窗口和滑块适用于1.9.1，但是colorbox需要1.3，这意味着到目前为止你无法获得所有3个工作的情况。那么，真正的问题是“如何在同一页面上使用不同版本的jQuery？”。

This has been answered before：使用jQuery的noConflict函数获取由不同变量表示的两个版本的jQuery，然后根据需要调用插件。

看作colorbox是奇怪的（并且在大多数代码中使用古老版本的jQuery将变得越来越困难），默认情况下最好使用jQuery 1.9.1（或更高版本），然后设置jQuery 1.3到另一个变量。我已经解释了文件名，路径等，但下面的代码应该给你一个想法：

<script src="jquery-1.9.1.min.js"></script>
<script src="popup.js"></script>
<script src="slider.js"></script>

<script src="jquery-1.3.2.min.js"></script>
<script src="colorbox.js"></script>

<script>
    $old = $.noConflict( true );
</script>

现在是上面发生的事情的结果：

加载jQuery 1.9.1，它将自己分配给$和jQuery变量。
加载弹出窗口和滑块脚本。这些假设jQuery 1.9.1绑定到上面的变量名称（它是），并附加它们的行为。
加载jQuery 1.3.2，它将jQuery变量替换为自身 - jQuery 1.9.1在全局范围内不再被引用 - 但这对于弹出窗口和滑块插件来说不是问题，因为它们已经执行了附上他们的行为。
加载颜色框脚本，找到jQuery 1.3.2并绑定它。
调用jQuery 1.3.2的noConflict - 这会将当前$和jQuery变量分配回此jQuery执行版本之前的任何变量（jQuery 1.9.1），并指定当前的jQuery（1.3.2）到你提供的任何变量。从这一点开始，如果要使用jQuery 1.3.2或colorbox插件，则需要使用该varialbe而不是$。

I created a proof of concept here：这些插件非常简单（他们所做的只是使用jQuery来点击段落提醒消息），但只有当他们拥有正确版本的jQuery时才能运行。

如何在同一页面上为不同版本的jQuery使用插件？

1 个答案: