1. 首页
  2. 问答
  3. JQuery No Conflict;合并时打破

JQuery No Conflict;合并时打破

2013-03-09 69 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

相关问题

 相关问题