1. 首頁
  2. 問答
  3. JQuery No Conflict;合併時打破

JQuery No Conflict;合併時打破

2013-03-09 57 views
0

我遇到了與不同版本的jQuery衝突的問題。我有一個拉動的菜單欄從1_7_1和從1_9_1拉出的選項卡項。如果您在使用這兩個版本時有任何使頁面工作的建議，請告訴我。它們可以在單獨的html文件中正常工作，但是一旦合併就會覆蓋另一個文件。JQuery No Conflict;合併時打破

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>jQuery Dropdown Menus</title> 
     <link rel="stylesheet" type="text/css" href="includes/menu.css" /> 
     <script type="text/javascript" src="includes/jquery-1.7.1.min.js"></script> 
     <script type="text/javascript" src="includes/jquery.dropmenu-1.1.4.js"></script> 

     <script type="text/javascript" src="includes/menu.js"></script> 
     <!--[if lt IE 9]> 
      <link rel="stylesheet" type="text/css" href="includes/menu_ie7_and_ie8.css" /> 
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
     <![endif]--> 
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
     <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> 

     <link rel="stylesheet" href="/resources/demos/style.css" /> 
     <script type="text/javascript"> 
     var jQuery_conflict = $.noConflict(true); 
     </script> 
     <script> 
     jQuery_conflict(function() { 
     $("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix"); 
     $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left"); 
     }); 
     </script> 

     <style> 
     .ui-tabs-vertical { width: 55em; } 
     .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; } 
     .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; } 
     .ui-tabs-vertical .ui-tabs-nav li a { display:block; } 
     .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; } 
     .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;} 
     </style> 
    </head> 
    <body> 

    <!-- MENU !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! --> 


     <div class="page"> 
      <header> 
      <!-- <a class="logo" href="#"></a> --> 
       <nav class="nav_menu"> 

        <ul class="dropmenu"> 
         <li><a href="#">Home</a> </li> 
         <li><a href"#">Lessons</a> 
             <ul> 
              <li><a href"#">Lesson 1</a> </li> 
              <li><a href"#">Lesson 2</a> </li> 
              <li><a href"#">Lesson 3</a> </li> 
              <li><a href"#">Lesson 4</a> </li> 
              <li><a href"#">Lesson 5</a> </li> 
              <li><a href"#">Lesson 6</a> </li> 
             </ul> 
           </li> 
         <li><a href="#"> Assignments</a> </li> 
         <li><a href="#">Tests and Quizzes</a> </li> 
         <li><a href="#">Playlist Creation</a></li> 

        </ul> 


       </nav> 
      </header> 
     </div> 







     <div id="tabs"> 
      <ul> 
       <li><a href="#tabs-1">Nunc tincidunt</a></li> 
       <li><a href="#tabs-2">Proin dolor</a></li> 
       <li><a href="#tabs-3">Aenean lacinia</a></li> 
       <li><a href="#tabs-4">Nunc tincidunt</a></li> 
       <li><a href="#tabs-5">Proin dolor</a></li> 
       <li><a href="#tabs-6">Aenean lacinia</a></li> 
      </ul> 
      <div id="tabs-1"> 
       <h2>Content heading 1</h2> 
        <p> <iframe width="700" height="394" src="http://www.youtube.com/embed/ae_DKNwK_ms" frameborder="0" allowfullscreen></iframe> 
        Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> 
      </div> 
      <div id="tabs-2"> 
       <h2>Content heading 2</h2> 
        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> 
      </div> 
      <div id="tabs-3"> 
       <h2>Content heading 3</h2> 
        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> 
        <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> 
      </div> 
      <div id="tabs-4"> 
       <h2>Content heading 1</h2> 
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> 
      </div> 
      <div id="tabs-5"> 
       <h2>Content heading 2</h2> 
        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> 
      </div> 
      <div id="tabs-6"> 
       <h2>Content heading 3</h2> 
        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> 
        <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> 
      </div> 

      </div> 



    </body> 
</html>

來源

2013-03-09 Yahiko Kikikoto

+2

根本就沒有。不要同時使用它們。 – gdoron 2013-03-09 22:27:49

+1

jQuery擅長向後兼容。如果你只使用新的，你會遇到問題嗎？ – 2013-03-09 22:29:34

+1

@AlexMarchant，不正確，jQuery 1.9。刪除了很多東西！ 'live'，'toggle-event'，'browser' ... – gdoron 2013-03-09 22:37:03

回答

0

這是因爲與jQuery每個文件重新定義$變量，因此一旦有使用noConflict沒有多大意義沒有更多的（你的每一個jQuery的版本定義後使用noConflict嵌入兩個版本。

簡單地說，合併後的文件應該是這樣的：

// jQuery 1.7 source code 
// ... jQuery 1.7 code ... 
var $jQuery17 = jQuery.noConflict(true); 
// jQuery 1.9 source code 
// .... jQuery 1.9 ... 
var $jQuery19 = jQuery.noConflict(true);

上使用$jQuery17後來和$jQuery19變量的訪問（使用）每個版本

來源

2013-03-09 22:51:49 WTK

+0

謝謝！我真的很感激反饋。我是否需要處理jQuery UI，或者只是在正常的jQuery庫中沒有衝突？ – 2013-03-09 23:06:30

+0

你必須自己處理jQuery UI，並且在jQuery UI中沒有相同的noConflict，所以它有點棘手。 – WTK 2013-03-10 18:43:00

1

與加載jQuery的兩個版本無關，需要.noConflict()，請嘗試jQuery Migrate plugin。

它爲已刪除的功能添加了兼容性，並且還警告您，以便您可以更新代碼。

來源

2013-03-09 22:55:59 Brad

+0

任何插件，其中的文檔包括「停止擊中你自己！」的行。是一個很好的插件（顯然，應該使用它）。 – 2013-03-09 23:04:08

+0

我實際上不會使用*記錄的庫方法'noConflict（）'「」搞亂它「。如果您有需要，可以使用它。 – WTK 2013-03-10 18:40:22

+0

@WTK，當然，但是如果Migrate插件完成這項工作，肯定不需要包含兩個jQuery副本。我會在我的答案中澄清措詞。 – Brad 2013-03-10 21:34:32

相關問題

 相關問題