解决JQUREY并存的问题

昨天修改DLE一模版，加进一个scroller插件的时候，遇到的问题jQuery 1.8与 jQuery 1.3，也就是jQuery不同版本之间有冲突。相信jQuery 不同版本之间的冲突，不兼容问题由来以久，由于项目的需要，必然也需要不断的使用较新版的jQuery，但对于原来就已经存在并已经采用了的旧jQuery版本，我们如何让多个不同的jQuery版本在同一个页面并存而不冲突呢？以下的笨方法能解决并存问题：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
     <head>
         <title>在同一个页面中加载多个不同的jQuery版本</title>
         <!-- 从谷歌服务器加载jQuery最新版本 -->
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
         <script type="text/javascript">
             var jQuery_New = $.noConflict(true);
         </script>
         <!-- 加载jQuery1.6.2版本 -->
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
         <script type="text/javascript">
             var jQuery_1_6_2 = $.noConflict(true);
         </script>
         <!-- 加载jQuery1.5.2版本 -->
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
         <script type="text/javascript">
             var jQuery_1_5_2 = $.noConflict(true);
         </script>
         <!-- 加载jQuery1.4.2版本 -->
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
         <script type="text/javascript">
             var jQuery_1_4_2 = $.noConflict(true);
         </script>
         <!-- 加载jQuery1.3.2版本 -->
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
         <script type="text/javascript">
             var jQuery_1_3_2 = $.noConflict(true);
         </script>
         <script type="text/javascript">
             alert(jQuery_New.fn.jquery);
             alert(jQuery_1_6_2.fn.jquery);
             alert(jQuery_1_5_2.fn.jquery);
             alert(jQuery_1_4_2.fn.jquery);
             alert(jQuery_1_3_2.fn.jquery);
            
             jQuery_New(function($){$('<p>我是最新的'+$.fn.jquery+'版本添加进来的。</p>').appendTo('body');});
             jQuery_1_6_2(function($){$('<p>我是'+$.fn.jquery+'版本添加进来的。</p>').appendTo('body');});
             jQuery_1_5_2(function($){$('<p>我是'+$.fn.jquery+'版本添加进来的。</p>').appendTo('body');});
             jQuery_1_4_2(function($){$('<p>我是'+$.fn.jquery+'版本添加进来的。</p>').appendTo('body');});
             jQuery_1_3_2(function($){$('<p>我是'+$.fn.jquery+'版本添加进来的。</p>').appendTo('body');});
         </script>
     </head>
     <body>
         在同一个页面中加载多个不同的jQuery版本
       <br>
    </body>
</html>

对于DLE来说，原来{headers}已经加载了Engine里面的jquery，9.8的版本是1.8，加载其他版本的jquery会有冲突，按上面的方法可以斛决问题。对于scroller插件，以下进行调用既可

前加入：

<script type="text/javascript" src="{THEME}/models/scroller/js/jquery.tools.min.js"></script>
<script type="text/javascript">
            var jQuery_1_3_2= $.noConflict(true);
</script>

要用到的地方：

<div id="scroller">
    <style type="text/css">
    a.browse {margin: 60px 2px; }
    .scrollable {width: 600px;}
    .scrollable img, .scrollable a {width:111px}
    .scrollable, .scrollable img, .scrollable a {height:150px; }
    .scrollable a {margin-right: 12px;}
    </style>
        <a class="prevPage browse left"></a>
    <div class="scrollable">
        <div class="items">
            {custom  template="scroller_items" aviable="global" from="0" limit="90" fixed="yes" order="date" cache="yes"}
        </div>
    </div>
        <a class="nextPage browse right"></a>
    <script type="text/javascript">
       jQuery_1_3_2(document).ready(function() {
            window.api = jQuery_1_3_2("div.scrollable").scrollable().circular().autoscroll({
                autoplay: true,
                api: true,
                steps: 5,
                interval: 5000
            });
        });
    </script>
</div>

这个style是我那模版的设置，自己调整即可，很简单的Scroller效果图

解决JQUREY并存的问题

解决JQUREY并存的问题

发表评论