1. 首頁
  2. 問答
  3. 在同一頁面中使用兩個jQuery庫

在同一頁面中使用兩個jQuery庫

2016-01-22 62 views
2

我正在創建一個自定義頁面，其中菜單需要一個jQuery庫，而彈出窗口需要另一個。當我把彈出式jQuery放在代碼的末尾時，只有彈出式函數可以工作，它會停止我的菜單動畫。如果我做了相反的操作，菜單將起作用，彈出式按鈕將停止工作。爲什麼會發生這種情況，我該如何解決這個問題？提前致謝。在同一頁面中使用兩個jQuery庫

<!-- here this is the code without popup box --> 
<!DOCTYPE html > 
<html> 
<head> 
    <title>webmap</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="description" content="Slide Down Box Menu with jQuery and CSS3" /> 
    <meta name="keywords" content="jquery, css3, box, sliding, menu, cube, navigation, portfolio, thumbnails" /> 

    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <link rel="stylesheet" type="text/css" href="jsuntitled/css/ol.css"> 
    <link rel="stylesheet" type="text/css" href="sideicon_file/css/demo.css"> 
    <link rel="stylesheet" type="text/css" href="sideicon_file/css/component.css"> 
    <link rel="stylesheet" type="text/css" href="sideicon_file/css/style1.css"> 
    <link rel="stylesheet" type="text/css" href="sideicon_file/css/animated_button.css"> 
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> 

     <!-- Material Design for Bootstrap --> 


     <link href="popup/css/custom.css" rel="stylesheet"> 

     <!-- Font Awesome --> 

     <!-- jQuery --> 


    <!-- Custom CSS --> 
    <script src="popup/js/jquery.js"></script> 
     <script src="popup/src/jquery-prompt21.js"></script> 
    <script src="popup/js/handlers.js"></script> 



    <script src="jquery-1.11.2.min.js" ></script> 
    <script src="sideicon_file/js/ease.min.js"></script> 
    <script src="sideicon_file/js/segment.min.js"></script> 
    <style> 
     html, body 
     { 
      height: 100%; 
      width: 100%; 
      margin: 0; 
      padding: 0; 
     } 


     #map 
     { 
      height: 500px; 
      width: 100%; 
      position: relative; 
      left: 0; 
      z-index: 0; 
     } 

     span.reference 
     { 
      position: absolute; 
      left: 600px; 
      bottom: 10px; 
      font-size: 20px; 
     } 

      span.reference a 
      { 
       color: #aaa; 
       text-transform: uppercase; 
       text-decoration: none; 
       text-shadow: 1px 1px 1px #000; 
       margin-right: 30px; 
      } 

       span.reference a:hover 
       { 
        color: #ddd; 
       } 

     ul.sdt_menu 
     { 
      margin-top: 0px; 
     } 


     div#banner 
     { 
      width: 1350px; 
      height: 40px; 
      margin: 0px auto; 
      border: #639 1px solid; 
      overflow: hidden; 
     } 

      div#banner > #banner_backdrop 
      { 
       position: relative; 
       height: 40px; 
      } 

      div#banner > #banner_content 
      { 
       position: relative; 
       width: 96%; 
       height: 40px; 
       margin-top:10px; 
       top: -40px; 
       color: #0099CC; 
       font-size: 20px; 
       left: 100px; 
       text-shadow: 1px 1px 1px #000; 
       text-transform: uppercase; 
      } 

      div#banner > #img1 
      { 
       position: absolute; 
       background: url(images/isrologo.png) no-repeat; 
       width: 80px; 
       height: 70px; 
       top: 0px; 
       left: 0px; 
      } 

      div#banner > #img2 
      { 
       position: absolute; 
       background: url(images/title.png) no-repeat; 
       width: 80px; 
       height: 70px; 
       top: 0px; 
       left: 1280px; 
      } 

     .ol-mouse-position 
     { 
      top: auto; 
      bottom: 2em; 
     } 

     .ol-overviewmap 
     { 
      bottom: 2em; 
     } 

     .ol-zoomslider 
     { 
      top: 10em; 
     } 

     .ol-rotate 
     { 
      top: 2.5em; 
     } 

     .draw-point 
     { 
      right: 3em; 
      top: .5em; 
     } 

     #wrapper 
     { 
     position:relative; 
      width: 100%; 
      height: 80px; 
      position: relative; 
      z-index: 1; 
      background-color: #009999; 

     } 
     .col-lg-6{ 
     width: 100px; 
     margin-left:200px;   
        } 

    </style> 
</head> 
<body> 
    <div id="banner"> 
     <div id="banner_backdrop"></div> 
     <div id="img1"></div> 
     <div id="img2"></div> 
     <div id="banner_content"> 
      Geo Spatial Information 
     </div> 
    </div> 
    <div id="wrapper"> 

     <div> 
      <ul id="sdt_menu" class="sdt_menu"> 

       <li > 
        <a href="#" > 
         <img src="images/landuse.jpg" alt="" /> 
         <span class="sdt_active"></span> 
         <span class="sdt_wrap"> 
          <span class="sdt_link"><input type="checkbox" id="landuse" />LANDUSE</span>  </span></a></li> 
       <li> 
        <a href="#" > 
         <img src="images/soil.jpg" alt="" /> 
         <span class="sdt_active"></span> 
         <span class="sdt_wrap"> 
          <span class="sdt_link" ><label><input type="checkbox" id="soil" />SOIL</label></span>  </span></a></li> 
       <li> 
        <a href="#"> 
         <img src="images/settlement.jpg" alt="" /> 
         <span class="sdt_active"></span> 
         <span class="sdt_wrap"> 
          <span class="sdt_link">RIVER</span>  </span></a></li> 
       <li> 
        <a href="#"> 
         <img src="images/settlement.jpg" alt="" /> 
         <span class="sdt_active"></span> 
         <span class="sdt_wrap"> 
          <span class="sdt_link">LITHOLOGY</span>  </span></a></li> 
       <li> 
        <a href="#"> 
         <img src="images/settlement.jpg" alt="" /> 
         <span class="sdt_active"></span> 
         <span class="sdt_wrap"> 
          <span class="sdt_link">GWP</span>  </span></a></li> 
       <li> 
        <a href="#"> 
         <img src="images/settlement.jpg" alt="" /> 
         <span class="sdt_active"></span> 
         <span class="sdt_wrap"> 
          <span class="sdt_link">CADASTRIAL</span>  </span></a></li> 
       <li> 
        <a href="#"> 
         <img src="images/settlement.jpg" alt="" /> 
         <span class="sdt_active"></span> 
         <span class="sdt_wrap"> 
          <span class="sdt_link">GEOMORPHOLOGY</span>  </span></a></li> 
       <li> 
        <a href="#"> 
         <img src="images/settlement.jpg" alt="" /> 
         <span class="sdt_active"></span> 
         <span class="sdt_wrap"> 
          <span class="sdt_link">SETTLEMNTS</span>  </span></a></li> 
       <li> 
        <a href="#"> 
         <img src="images/road.jpg" alt="" /> 
         <span class="sdt_active"></span> 
         <span class="sdt_wrap"> 
          <span class="sdt_link">ROADS</span>  </span></a></li> 
      </ul> 
     </div> 
     <div class="sidebutton"> 
      <div class="device__screen"> 
       <div id="menu-icon-wrapper" class="menu-icon-wrapper" style="visibility: hidden"> 
        <svg width="1000px" height="1000px"> 
         <path id="pathA" d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"></path> 
         <path id="pathB" d="M 300 500 L 700 500"></path> 
         <path id="pathC" d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"></path> 
        </svg> 
        <button id="menu-icon-trigger" class="menu-icon-trigger"></button> 
       </div> 
      </div> 
      <!-- menu-icon-wrapper --> 
      <div id="dummy" class="dummy"> 
       <div class="dummy__item"> 
        <select name="country_id" id="state_id" tabindex="1"> 
         <option value="">-- Select state --</option> 
         <option value="India">-- India --</option> 
        </select> 
       </div> 
       <div class="dummy__item"> 
        <select name="district_id" id="district_id" tabindex="2"> 
         <option value="">-- Select district --</option> 
        </select> 
       </div> 
       <div class="dummy__item"> 
        <select name="village_id" id="village_id" tabindex="3"> 
         <option value="">-- Select village --</option> 
        </select> 
       </div> 

      </div> 
     </div> 
     <div class="col-lg-6"><nav class="cl-effect-20"><a href="#" class="btn btn-info show-popup"><span data-hover="QueryBuilder">QueryBuilder</span></a></nav> 


     </div> 

     </div> 
     <!-- Element to pop up --> 



    <div id="map" class="map"> 
     <div> 
      <span class="reference">All Rights Reserved 
      </span> 
     </div> 
    </div> 




    <script src="sideicon_file/js/main.js"></script> 

    <script src="jsuntitled/ol.js"></script> 
    <script> 

var landuseLayer = new ol.layer.Image({ 
    coordinates: [-124.73142200000001, 24.955967, 
        -66.969849, 49.371735], 
    source: new ol.source.ImageWMS({ 
     url: 'http://localhost:8080/geoserver/topp/wms', 
     params: {'LAYERS': 'topp:states'}, 
    maxZoom: 19 
    }), 
    visible: false, 
    }); 

    var soilLayer = new ol.layer.Image({ 
    coordinates: [79.14511833527447, 20.987418098133496, 79.2018842619151, 21.050233196545], 
     source: new ol.source.ImageWMS({ 
      url: 'http://localhost:8080/geoserver/sagy/wms', 
      params: {'LAYERS': 'sagy:pachgaon_LULC'}, 
      maxZoom: 19 
     }), 
     visible: false 
     }); 

var map = new ol.Map({ 
    layers: [landuseLayer, soilLayer], 
    renderer: 'canvas', 
    target: document.getElementById('map'), 
    controls: ol.control.defaults({ 
       attributionOptions: ({ 
        collapsible: false 
       }) 
      }).extend([ 
       new ol.control.ZoomSlider(), 
       new ol.control.ZoomToExtent({ 
        extent: [ 
         813079.7791264898, 5929220.284081122, 
         848966.9639063801, 5936863.986909639 

        ] 
       }), 

       new ol.control.Rotate(), 
       new ol.control.OverviewMap(), 
       new ol.control.ScaleLine(), 
       new ol.control.FullScreen(), 
       new ol.control.MousePosition({ 
        coordinateFormat: ol.coordinate.createStringXY(4), 
        projection: 'EPSG:4326' 
       }) 
      ]), 

    interactions: ol.interaction.defaults().extend([ 
       new ol.interaction.Select({ 
        condition: ol.events.condition.mouseMove 
       }) 
      ]), 


      view: new ol.View({ 
       center: new ol.geom.Point([-10997148, 4569099]) 
        .transform('EPSG:4326', 'EPSG:4326').getCoordinates(), 
       zoom: 4 
      }), 

      target: 'map' 
     }); 


$('input[type=checkbox]').on('change', function() { 
    var layer = { 

    landuse: landuseLayer, 
    soil: soilLayer, 


    }[$(this).attr('id')]; 
    layer.setVisible(!layer.getVisible()); 
}); 

     // define a custom control that can be used to draw points 
     var DrawControl = function (opt_options) { 
      var options = opt_options || {}; 
      this.active = options.active || false; 
      var draw = new ol.interaction.Draw({ 
       source: options.source, 
       type: 'Point' 
      }); 
      var this_ = this; 
      var handleDrawPoint = function (e) { 
       e.preventDefault(); 
       if (!this.active) { 
        this_.getMap().addInteraction(draw); 
        this.active = true; 
       } else { 
        this_.getMap().removeInteraction(draw); 
        this.active = false; 
       } 
      }; 

      // this will be the ui of the component 
      var anchor = document.createElement('a'); 
      anchor.href = '#draw-point'; 
      anchor.innerHTML = 'New Point'; 

      // bind to click and touchevents to support mobile 
      anchor.addEventListener('click', handleDrawPoint, false); 
      anchor.addEventListener('touchstart', handleDrawPoint, false); 

      var element = document.createElement('div'); 
      element.className = 'ol-control draw-point ol-unselectable'; 
      element.appendChild(anchor); 

      ol.control.Control.call(this, { 
       element: element, 
       target: options.target 
      }); 
     }; 
     // inherit base functionality from ol.control.Control 
     ol.inherits(DrawControl, ol.control.Control); 

     // init a vector layer whose source can be used with our new control 
     var vectorSource = new ol.source.Vector(); 
     var vectorLayer = new ol.layer.Vector({ 
      source: vectorSource, 
      style: new ol.style.Style({ 
       fill: new ol.style.Fill({ 
        color: 'rgba(255, 255, 255, 0.2)' 
       }), 
       stroke: new ol.style.Stroke({ 
        color: '#ffcc33', 
        width: 2 
       }), 
       image: new ol.style.Circle({ 
        radius: 7, 
        fill: new ol.style.Fill({ 
         color: '#ffcc33' 
        }) 
       }) 
      }) 
     }); 

     map.addLayer(vectorLayer); 

     // here we use our new control 
     map.addControl(new DrawControl({ 
      source: vectorSource 
     })); 


    </script> 





<script type="text/javascript" src="jquery.min.js"></script> 
    <script type="text/javascript" src="jquery.easing.1.3.js"></script> 

    <script type="text/javascript"> 
     $(function() { 
      $('.ol-full-screen-false').click(function() { 
       var isFullScreen = $("#hdnIsFullScreen").val(); 
       if (isFullScreen == "false") { 
        $('#map').css({ 'height': '100%', 'top': '0' }); 
        $("#hdnIsFullScreen").val("true"); 
       } 
       else if (isFullScreen == "true") { 
        $('#map').css({ 'height': '550px', 'top': '115px' }); 
        $("#hdnIsFullScreen").val("false"); 
       } 
      }); 


/**combobox code for state districtand village */ 
      $("#state_id").change(function() { 
       $("#district_id").html(""); 
       $("#village_id").html(""); 
       $("#village_id").append("<option>-- Select village --</option>"); 
       var district = ""; 
       for (var i = 1; i <= 10; i++) { 
        district = district + "<option value='District" + i + "'>District" + i + "</option>"; 
       } 
       $("#district_id").append("<option>-- Select district --</option>" + district); 
      }); 

      $("#district_id").change(function() { 
       $("#village_id").html(""); 
       var village = ""; 
       for (var i = 1; i <= 10; i++) { 
        village = village + "<option value='Village" + i + "'>Village" + i + "</option>"; 
       } 
       $("#village_id").append("<option>-- Select village --</option>" + village); 
      }); 

      /** 
      * for each menu element, on mouseenter, 
      * we enlarge the image, and show both sdt_active span and 
      * sdt_wrap span. If the element has a sub menu (sdt_box), 
      * then we slide it - if the element is the last one in the menu 
      * we slide it to the left, otherwise to the right 
      */ 
      $('#sdt_menu > li').bind('mouseenter', function() { 
       var $elem = $(this); 
       $elem.find('img') 
        .stop(true) 
        .animate({ 
         'width': '110px', 
         'height': '60px', 
         'left': '0px' 
        }, 400, 'easeOutBack') 
        .andSelf() 
        .find('.sdt_wrap') 
        .stop(true) 
        .animate({ 'top': '55px' }, 500, 'easeOutBack') 
        .andSelf() 
        .find('.sdt_active') 
        .stop(true) 
        .animate({ 'height': '45px' }, 300, function() { 
         var $sub_menu = $elem.find('.sdt_box'); 
         if ($sub_menu.length) { 
          var left = '50px'; 
          if ($elem.parent().children().length == $elem.index() + 1) 
           left = '-50px'; 
          $sub_menu.show().animate({ 'left': left }, 200); 
         } 
        }); 
      }).bind('mouseleave', function() { 
       var $elem = $(this); 
       var $sub_menu = $elem.find('.sdt_box'); 
       if ($sub_menu.length) 
        $sub_menu.hide().css('left', '0px'); 

       $elem.find('.sdt_active') 
        .stop(true) 
        .animate({ 'height': '0px' }, 300) 
        .andSelf().find('img') 
        .stop(true) 
        .animate({ 
         'width': '0px', 
         'height': '0px', 
         'left': '85px' 
        }, 400) 
        .andSelf() 
        .find('.sdt_wrap') 
        .stop(true) 
        .animate({ 'top': '10px' }, 500); 

      }); 
     }); 

    </script> 

    </body> 
</html>

來源

2016-01-22 ads

+0

嗨。歡迎來到StackOverflow。這看起來像jQuery庫有衝突，並且最好使用'$ .noConflict（）'。如果您可以發佈完整的代碼，我們將能夠爲您提供幫助。 '：）'乾杯。 –

+0

http://stackoverflow.com/questions/1566595/can-i-use-multiple-versions-of-jquery-on-the-same-page –

+1

@PraveenKumar謝謝:) – ads

回答

2

試試這個使用兩個jQuery版本。

<script src="jquery.latest-version.js"></script> 
<script src="jquery.oldest-version.js"></script> 

<script> 
// Restore globally scoped jQuery variables to the first version loaded (the latest) 
// and affect into `$old` the current (the oldest). 
$old = $.noConflict(); 
console.log($); // This is the latest jQuery 
console.log($old); // This is the oldest jQuery 
</script>

這是它如何工作到jQuery的：

(function (factory) { 
    // Save the jQuery var already existing... 
    var initialClass = window.jQuery, 
     // ...and affect our jQuery. 
     api = window.jQuery = factory; 
    api.noConflict = function() { 
     // But if `noConflict` is used, jQuery is setted by initial existing jQuery saved... 
     window.jQuery = initialClass; 
     // ...and our own jQuery is returned. 
     return api; 
    }; 
}(function() { 
    // Normal definition of jQuery class here. 
}));
  1. 所以，首先加載最新的。
  2. 然後加載最舊的。
  3. 使用noConflict從最早的恢復到$最舊並影響到$old。

來源

2016-01-22 12:03:49

+0

實際上，你應該把'$ old = $ .noConfiic'在舊版本之上，只是保持......你總是會得到「新」版本。 – ryanc1256

+0

所以我需要重新命名舊版本或新版本的jquery，或者我必須使用舊的n新版本庫 – ads

+0

首先使用最新版本，使用後最早。 –

3

是的，通過使用jQuery的noconflict模式。 http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/

<!-- load jQuery 2.2.0 --> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<script type="text/javascript"> 
    var jQuery_2_2_0 = $.noConflict(true); 
</script> 

<!-- load jQuery 1.12.0 --> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script type="text/javascript"> 
    var jQuery_1_12_2 = $.noConflict(true); 
</script>

然後使用jQuery_2_2_0（ '＃選擇'）（）的函數。 或 jQuery_1_12_2（'＃selector'）。function（）;

而不是$（'＃selector'）。function（）;或jQuery（'＃selector'）。function（）;

來源

2016-01-22 12:21:53

+0

謝謝，我會試試這個。 :) – ads

+0

請讓它可讀。 –

+1

@PraveenKumar感謝讓它可讀 –

相關問題

 相關問題