公司眼下的项目中的右側导航菜单用到了bootstrap(v3.2.0)的affix.js(Affix插件)与scrospy.js(滚动监听)插件， 须要用到版本号>= 1.9.0的jquery,眼下最新的jquery版本号是2.1.1。公司之前用的jquery版本号是1.6.2的，怎样在同一个站点里应用不同版本号的jquery而不引起冲突呢？在网上查了资料找到可解决的方法。

<!-- 载入jQuery1.6.2版本号-->

<script type="text/javascript" language="javascript" src="jquery-1.6.2.min.js"></script>

 

 

<!-- 载入jQuery2.1.1版本号-->

<script type="text/javascript" language="javascript" src="jquery-2.1.1.min.js"></script>

<script type="text/javascript">var jQuery_211 = $.noConflict(true);</script>

 

// 分别改动affix.js和scrospy.js中的$或jQuery为jQuery_211

完整的源码

test.html

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml"	xmlns:v="urn:schemas-microsoft-com:vml">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>test</title>
  6. <link type="text/css" rel="stylesheet" href="src2.css" />
  7. <script type="text/javascript" language="javascript" src="jquery-1.6.2.min.js"></script>
  8. <script type="text/javascript" language="javascript" src="jquery-2.1.1.min.js"></script>
  9. <script type="text/javascript">var jQuery_211 = $.noConflict(true);</script>
  10. <script type="text/javascript" language="javascript" src="affix.js"></script>
  11. <script type="text/javascript" language="javascript" src="scrollspy.js"></script>
  12. </head>
  13. <body>
  14. <div class="sideToolbar" id="sideToolbar">
  15. <ul class="nav">
  16. <li><a href="#zixun">最新资讯</a></li>
  17. <li><a href="#meiguo">留学美国</a></li>
  18. <li><a href="#jiajiao">培训家教</a></li>
  19. <li><a href="#xuexiao">洛杉矶学校</a></li>
  20. </ul>
  21. <a class="back-to-top" href="#pageCenter" title="返回顶部"></a>
  22. <a class="dim-code" href="http://t.qq.com/chineseinla_com" title="微博: @chineseinla_com, 微信公众平台：chineseinla。" target="_blank"></a>
  23. </div>
  24. <div class="test" id="pageCenter">
  25. <h1>内容</h1>
  26. <div class="content1 color1" id="zixun"><h2 >最新资讯</h2></div>
  27. <div class="content1 color2" id="meiguo"><h2>留学美国</h2></div>
  28. <div class="content1 color3" id="jiajiao"><h2>培训家教</h2></div>
  29. <div class="content1 color4" id="xuexiao"><h2>洛杉矶学校</h2></div>
  30. </div>
  31. <div class="test" id="footer">
  32. </div>
  33. </body>
  34. <script type="text/javascript">
  35. if (document.body.offsetWidth >= 1190) {
  36. jQuery_211('#sideToolbar').show();
  37. jQuery_211('#sideToolbar').affix({
  38. offset: {
  39. 	top: 100,
  40. 	bottom: function () {return this.bottom=jQuery_211('#footer').outerHeight(true)}
  41.     }
  42. });
  43. jQuery_211('body').scrollspy({ target: '#sideToolbar' });
  44. window.onload = function(){
  45. var div = document.getElementById('pageCenter');
  46. var divx1 = div.offsetLeft + div.offsetWidth;
  47. var divy1 = document.documentElement.clientHeight / 2 - 200;
  48. var div2 = document.getElementById('sideToolbar');
  49. //div2.style.top=divy1+'px';
  50. div2.style.left=divx1+'px';
  51. }
  52. }
  53. </script>
  54. </html>

affix.js

  1. /* ========================================================================
  2.  * Bootstrap: affix.js v3.2.0
  3.  * http://getbootstrap.com/javascript/#affix
  4.  * ========================================================================
  5.  * Copyright 2011-2014 Twitter, Inc.
  6.  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  7.  * ======================================================================== */
  8.  
  9. +function (jQuery_211) {
  10.   'use strict';
  11.  
  12.   // AFFIX CLASS DEFINITION
  13.   // ======================
  14.  
  15.   var Affix = function (element, options) {
  16.     this.options = jQuery_211.extend({}, Affix.DEFAULTS, options)
  17.  
  18.     this.jQuery_211target = jQuery_211(this.options.target)
  19.       .on('scroll.bs.affix.data-api', jQuery_211.proxy(this.checkPosition, this))
  20.       .on('click.bs.affix.data-api',  jQuery_211.proxy(this.checkPositionWithEventLoop, this))
  21.  
  22.     this.jQuery_211element     = jQuery_211(element)
  23.     this.affixed      =
  24.     this.unpin        =
  25.     this.pinnedOffset = null
  26.  
  27.     this.checkPosition()
  28.   }
  29.  
  30.   Affix.VERSION  = '3.2.0'
  31.  
  32.   Affix.RESET    = 'affix affix-top affix-bottom'
  33.  
  34.   Affix.DEFAULTS = {
  35.     offset: 0,
  36.     target: window
  37.   }
  38.  
  39.   Affix.prototype.getPinnedOffset = function () {
  40.     if (this.pinnedOffset) return this.pinnedOffset
  41.     this.jQuery_211element.removeClass(Affix.RESET).addClass('affix')
  42.     var scrollTop = this.jQuery_211target.scrollTop()
  43.     var position  = this.jQuery_211element.offset()
  44.     return (this.pinnedOffset = position.top - scrollTop)
  45.   }
  46.  
  47.   Affix.prototype.checkPositionWithEventLoop = function () {
  48.     setTimeout(jQuery_211.proxy(this.checkPosition, this), 1)
  49.   }
  50.  
  51.   Affix.prototype.checkPosition = function () {
  52.     if (!this.jQuery_211element.is(':visible')) return
  53.  
  54.     var scrollHeight = jQuery_211(document).height()
  55.     var scrollTop    = this.jQuery_211target.scrollTop()
  56.     var position     = this.jQuery_211element.offset()
  57.     var offset       = this.options.offset
  58.     var offsetTop    = offset.top
  59.     var offsetBottom = offset.bottom
  60.  
  61.     if (typeof offset != 'object')         offsetBottom = offsetTop = offset
  62.     if (typeof offsetTop == 'function')    offsetTop    = offset.top(this.jQuery_211element)
  63.     if (typeof offsetBottom == 'function') offsetBottom = offset.bottom(this.jQuery_211element)
  64.  
  65.     var affix = this.unpin   != null && (scrollTop + this.unpin <= position.top) ? false :
  66.                 offsetBottom != null && (position.top + this.jQuery_211element.height() >= scrollHeight - offsetBottom) ? 'bottom' :
  67.                 offsetTop    != null && (scrollTop <= offsetTop) ? 'top' : false
  68.  
  69.     if (this.affixed === affix) return
  70.     if (this.unpin != null) this.jQuery_211element.css('top', '')
  71.  
  72.     var affixType = 'affix' + (affix ? '-' + affix : '')
  73.     var e         = jQuery_211.Event(affixType + '.bs.affix')
  74.  
  75.     this.jQuery_211element.trigger(e)
  76.  
  77.     if (e.isDefaultPrevented()) return
  78.  
  79.     this.affixed = affix
  80.     this.unpin = affix == 'bottom' ? this.getPinnedOffset() : null
  81.  
  82.     this.jQuery_211element
  83.       .removeClass(Affix.RESET)
  84.       .addClass(affixType)
  85.       .trigger(jQuery_211.Event(affixType.replace('affix', 'affixed')))
  86.  
  87.     if (affix == 'bottom') {
  88.       this.jQuery_211element.offset({
  89.         top: scrollHeight - this.jQuery_211element.height() - offsetBottom
  90.       })
  91.     }
  92.   }
  93.  
  94.   // AFFIX PLUGIN DEFINITION
  95.   // =======================
  96.  
  97.   function Plugin(option) {
  98.     return this.each(function () {
  99.       var jQuery_211this   = jQuery_211(this)
  100.       var data    = jQuery_211this.data('bs.affix')
  101.       var options = typeof option == 'object' && option
  102.  
  103.       if (!data) jQuery_211this.data('bs.affix', (data = new Affix(this, options)))
  104.       if (typeof option == 'string') data[option]()
  105.     })
  106.   }
  107.  
  108.   var old = jQuery_211.fn.affix
  109.  
  110.   jQuery_211.fn.affix             = Plugin
  111.   jQuery_211.fn.affix.Constructor = Affix
  112.  
  113.   // AFFIX NO CONFLICT
  114.   // =================
  115.  
  116.   jQuery_211.fn.affix.noConflict = function () {
  117.     jQuery_211.fn.affix = old
  118.     return this
  119.   }
  120.  
  121.   // AFFIX DATA-API
  122.   // ==============
  123.  
  124.   jQuery_211(window).on('load', function () {
  125.     jQuery_211('[data-spy="affix"]').each(function () {
  126.       var jQuery_211spy = jQuery_211(this)
  127.       var data = jQuery_211spy.data()
  128.  
  129.       data.offset = data.offset || {}
  130.  
  131.       if (data.offsetBottom) data.offset.bottom = data.offsetBottom
  132.       if (data.offsetTop)    data.offset.top    = data.offsetTop
  133.  
  134.       Plugin.call(jQuery_211spy, data)
  135.     })
  136.   })
  137.  
  138. }(jQuery_211);

scrollspy.js

  1. /* ========================================================================
  2.  * Bootstrap: scrollspy.js v3.2.0
  3.  * http://getbootstrap.com/javascript/#scrollspy
  4.  * ========================================================================
  5.  * Copyright 2011-2014 Twitter, Inc.
  6.  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  7.  * ======================================================================== */
  8.  
  9. +function (jQuery_211) {
  10.   'use strict';
  11.  
  12.   // SCROLLSPY CLASS DEFINITION
  13.   // ==========================
  14.  
  15.   function ScrollSpy(element, options) {
  16.     var process  = jQuery_211.proxy(this.process, this)
  17.  
  18.     this.jQuery_211body          = jQuery_211('body')
  19.     this.jQuery_211scrollElement = jQuery_211(element).is('body') ? jQuery_211(window) : jQuery_211(element)
  20.     this.options        = jQuery_211.extend({}, ScrollSpy.DEFAULTS, options)
  21.     this.selector       = (this.options.target || '') + ' .nav li > a'
  22.     this.offsets        = []
  23.     this.targets        = []
  24.     this.activeTarget   = null
  25.     this.scrollHeight   = 0
  26.  
  27.     this.jQuery_211scrollElement.on('scroll.bs.scrollspy', process)
  28.     this.refresh()
  29.     this.process()
  30.   }
  31.  
  32.   ScrollSpy.VERSION  = '3.2.0'
  33.  
  34.   ScrollSpy.DEFAULTS = {
  35.     offset: 10
  36.   }
  37.  
  38.   ScrollSpy.prototype.getScrollHeight = function () {
  39.     return this.jQuery_211scrollElement[0].scrollHeight || Math.max(this.jQuery_211body[0].scrollHeight, document.documentElement.scrollHeight)
  40.   }
  41.  
  42.   ScrollSpy.prototype.refresh = function () {
  43.     var offsetMethod = 'offset'
  44.     var offsetBase   = 0
  45.  
  46.     if (!jQuery_211.isWindow(this.jQuery_211scrollElement[0])) {
  47.       offsetMethod = 'position'
  48.       offsetBase   = this.jQuery_211scrollElement.scrollTop()
  49.     }
  50.  
  51.     this.offsets = []
  52.     this.targets = []
  53.     this.scrollHeight = this.getScrollHeight()
  54.  
  55.     var self     = this
  56.  
  57.     this.jQuery_211body
  58.       .find(this.selector)
  59.       .map(function () {
  60.         var jQuery_211el   = jQuery_211(this)
  61.         var href  = jQuery_211el.data('target') || jQuery_211el.attr('href')
  62.         var jQuery_211href = /^#./.test(href) && jQuery_211(href)
  63.  
  64.         return (jQuery_211href
  65.           && jQuery_211href.length
  66.           && jQuery_211href.is(':visible')
  67.           && [[jQuery_211href[offsetMethod]().top + offsetBase, href]]) || null
  68.       })
  69.       .sort(function (a, b) { return a[0] - b[0] })
  70.       .each(function () {
  71.         self.offsets.push(this[0])
  72.         self.targets.push(this[1])
  73.       })
  74.   }
  75.  
  76.   ScrollSpy.prototype.process = function () {
  77.     var scrollTop    = this.jQuery_211scrollElement.scrollTop() + this.options.offset
  78.     var scrollHeight = this.getScrollHeight()
  79.     var maxScroll    = this.options.offset + scrollHeight - this.jQuery_211scrollElement.height()
  80.     var offsets      = this.offsets
  81.     var targets      = this.targets
  82.     var activeTarget = this.activeTarget
  83.     var i
  84.  
  85.     if (this.scrollHeight != scrollHeight) {
  86.       this.refresh()
  87.     }
  88.  
  89.     if (scrollTop >= maxScroll) {
  90.       return activeTarget != (i = targets[targets.length - 1]) && this.activate(i)
  91.     }
  92.  
  93.     if (activeTarget && scrollTop <= offsets[0]) {
  94.       return activeTarget != (i = targets[0]) && this.activate(i)
  95.     }
  96.  
  97.     for (i = offsets.length; i--;) {
  98.       activeTarget != targets[i]
  99.         && scrollTop >= offsets[i]
  100.         && (!offsets[i + 1] || scrollTop <= offsets[i + 1])
  101.         && this.activate(targets[i])
  102.     }
  103.   }
  104.  
  105.   ScrollSpy.prototype.activate = function (target) {
  106.     this.activeTarget = target
  107.  
  108.     jQuery_211(this.selector)
  109.       .parentsUntil(this.options.target, '.active')
  110.       .removeClass('active')
  111.  
  112.     var selector = this.selector +
  113.         '[data-target="' + target + '"],' +
  114.         this.selector + '[href="' + target + '"]'
  115.  
  116.     var active = jQuery_211(selector)
  117.       .parents('li')
  118.       .addClass('active')
  119.  
  120.     if (active.parent('.dropdown-menu').length) {
  121.       active = active
  122.         .closest('li.dropdown')
  123.         .addClass('active')
  124.     }
  125.  
  126.     active.trigger('activate.bs.scrollspy')
  127.   }
  128.  
  129.   // SCROLLSPY PLUGIN DEFINITION
  130.   // ===========================
  131.  
  132.   function Plugin(option) {
  133.     return this.each(function () {
  134.       var jQuery_211this   = jQuery_211(this)
  135.       var data    = jQuery_211this.data('bs.scrollspy')
  136.       var options = typeof option == 'object' && option
  137.  
  138.       if (!data) jQuery_211this.data('bs.scrollspy', (data = new ScrollSpy(this, options)))
  139.       if (typeof option == 'string') data[option]()
  140.     })
  141.   }
  142.  
  143.   var old = jQuery_211.fn.scrollspy
  144.  
  145.   jQuery_211.fn.scrollspy             = Plugin
  146.   jQuery_211.fn.scrollspy.Constructor = ScrollSpy
  147.  
  148.   // SCROLLSPY NO CONFLICT
  149.   // =====================
  150.  
  151.   jQuery_211.fn.scrollspy.noConflict = function () {
  152.     jQuery_211.fn.scrollspy = old
  153.     return this
  154.   }
  155.  
  156.   // SCROLLSPY DATA-API
  157.   // ==================
  158.  
  159.   jQuery_211(window).on('load.bs.scrollspy.data-api', function () {
  160.     jQuery_211('[data-spy="scroll"]').each(function () {
  161.       var jQuery_211spy = jQuery_211(this)
  162.       Plugin.call(jQuery_211spy, jQuery_211spy.data())
  163.     })
  164.   })
  165.  
  166. }(jQuery_211);

src2.css

  1. @charset "utf-8";
  2. /* CSS Document */
  3. * {
  4. 	margin:0;
  5. 	padding:0;
  6. }
  7. body {
  8. 	text-align:center;
  9. 	position: relative;
  10. }
  11. a{text-decoration:none;}
  12. a:link{color:#333;}
  13. a:visited{color:#333;}
  14. a:hover{color:#78b9e3;}
  15. a:active{color:#333;}
  16. .test {
  17. 	width: 1030px;
  18. 	height: 2048px;
  19. 	background: #ccc;
  20. 	position: relative;
  21. 	display: inline-block;
  22. }
  23. .content1 {
  24. width:100%;
  25. height:500px;
  26. }
  27. .color1 {
  28. 	background-color:red;
  29. }
  30. .color2 {
  31. 	background-color:blue;
  32. }
  33. .color3 {
  34. 	background-color:pink;
  35. }
  36. .color4 {
  37. 	background-color:green;
  38. }
  39. /* sideToolbar 右側导航菜单 yangyao 2014/10/27  */
  40. .sideToolbar {
  41. 	width: 76px;
  42. 	font-size: 14px;
  43. 	text-align: center;
  44. 	display:none;
  45. 	position:fixed;
  46. }
  47. .sideToolbar .nav {
  48. 	margin:0;
  49. 	padding:0;
  50. 	list-style-type: none;
  51. }
  52. .sideToolbar .nav>li>a {
  53. 	width:100%;
  54. 	height: 100%;
  55. 	display: block;
  56. 	line-height: 40px;
  57. 	background:#ededed;
  58. 	overflow: hidden;
  59. 	border-top: 1px solid #ffffff;
  60. }
  61. .sideToolbar .nav>li>a:hover {
  62. 	font-weight: bold;
  63. 	color: #ffffff;
  64. 	background:#77B7E3;
  65. }
  66. .sideToolbar .nav>.active a {
  67. 	font-weight: bold;
  68. 	color: #ffffff;
  69. 	background:#77B7E3;
  70. }
  71. .sideToolbar .back-to-top {
  72. 	width:75px;
  73. 	height: 33px;
  74. 	background: url(./images/jiantou.jpg) repeat-x top;
  75. 	border-top: 1px solid #ffffff;
  76. 	display: block;
  77. }
  78. .sideToolbar .back-to-top:hover {
  79. 	background: url(./images/jiantou_over.jpg) repeat-x top;
  80. }
  81. .sideToolbar .dim-code {
  82. 	width:75px;
  83. 	height: 74px;
  84. 	background: url(./images/erweima.jpg) repeat-x top;
  85. 	border-top: 1px solid #ffffff;
  86. 	display: block;
  87. }
  88. .affix-top{position:fixed;top:30%;}
  89. .affix{position:fixed;top:30%;}
  90. .affix-bottom{position:absolute;}
  91. /* end sideToolbar 右側导航菜单 */

图片

erweima.jpg

jiantou.jpg

jiantou_over.jpg

jquery更新后怎样在一个站点中使用两个版本号的jQuery的更多相关文章

  1. [PTA] 数据结构与算法题目集 6-7 在一个数组中实现两个堆栈

    //如果堆栈已满,Push函数必须输出"Stack Full"并且返回false:如果某堆栈是空的,则Pop函数必须输出"Stack Tag Empty"(其中 ...

  2. jQuery：在一个回调中处理多个请求

    我曾经为Mozilla Developer Network 开发一个新功能,它需要加载一个基本的脚本文件的同时加载一个JSON请求.因为我们使用的是jQuery,意味着要使用 jQuery.getSc ...

  3. MySQL 如何在一个语句中更新一个数值后返回该值 -- 自增长种子竞态问题处理

    什么是竞态问题? 假设有一个计数器,首先当前值自增长,然后获取到自增长之后的当前值.自增长后的值有可能被有些操作用来当做唯一性标识,因此并发的操作不能允许取得相同的值. 为什么不能使用使用UPDATE ...

  4. 转 mvc项目中,解决引用jquery文件后智能提示失效的办法

    mvc项目中,解决用Url.Content方法引用jquery文件后智能提示失效的办法   这个标题不知道要怎么写才好, 但是希望文章的内容对大家有帮助. 场景如下: 我们在用开发开发程序的时候,经常 ...

  5. net网站发布－允许更新此预编译站点 及修改发布后内容

    我们可以通过如下的方法发布VS2010的网站: “生成”→“发布网站”:弹出对话框! 在打开的对话框中,有一个选项是至关重要的,那就是“允许更新此预编译站点”: “允许更新此预编译站点”这一项,默认情 ...

  6. WebGIS中以version方式实现代码更新后前端自动读取更新代码的方法

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1. 前言 GIS代码进行更新后,由于用户前端已有缓存,导致更新的功能不 ...

  7. 如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]

    如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites] 一.布局页面介绍[Abo ...

  8. SharePoint Iframe 报错“此内容不能显示在一个框架中”

    问题描述 我们SharePoint站点用Excel Service发布的Excel,需要Iframe到其他系统中,但是,Iframe的时候发现报错“此内容不能显示在一个框架中”. 后来,尝试在其他系统 ...

  9. 网站简介-为什么网站的ICO图标更新后，ie浏览器没有更新过来？

    为什么网站的ICO图标更新后,ie浏览器没有更新过来? 如何更新本地ico图标? 收藏夹里的网址访问后网站ico小图标怎么不会更新,还是没图标的. 如果制作了一个新的favicon.ico图标,并且已 ...

随机推荐

  1. 快速构建AdapterView的Adapter--ingeniousadapter

    项目地址:ingeniousadapter 前面的话:本项目的原型是QuickAdapter,它们的思路基本一致,但本项目的优势在于: 支持AdapterView存在多个layout类型 可配置图片加 ...

  2. jquery之null的数组

    去掉null的数组 function ClearNullArr(arr) {    for (var i = 0;  i < arr.length; i++) {         if(arr[ ...

  3. Some good iOS questions

    这里,我列举了一些在Stackoverflow中一些比较好的关于iOS的问题.大部分我列举的问题都是关于Objective C.所有问题中,我比较喜欢“为什么”这一类型的问题. 问题 1. What’ ...

  4. (转)Java 代码优化过程的实例介绍

    简介: 通过笔者经历的一个项目实例,本文介绍了 Java 代码优化的过程,总结了优化 Java 程序的一些最佳实践,分析了进行优化的方法,并解释了性能提升的原因.从多个角度分析导致性能低的原因,并逐个 ...

  5. IL（Intermediate Language）

    释义: IL是.NET框架中中间语言(Intermediate Language)的缩写.使用.NET框架提供的编译器可以直接将源程序编译为.exe或.dll文件,但此时编译出来的程序代码并不是CPU ...

  6. va_list/va_start/va_arg/va_end深入分析

    http://www.cnblogs.com/justinzhang/archive/2011/09/29/2195969.html

  7. 慕课linux学习笔记（八）常用命令（5）

    解压缩命令 常用压缩格式 .zip .gz .bz2 .tar.gz .tar.bz2 zip [压缩文件名] [ 原文件 ] #压缩文件 -r [压缩文件名] [ 源目录] #压缩目录 -r [压缩 ...

  8. redis之lua脚本

    背景介绍 redis数据库提供了一些管理功能比如 流水线:打包发送多条命令,并在一个回复里面接收所有被执行命令的结果.事务:一次执行多条命令,被执行的命令要么就全部都被执行,要么就一个也不执行.并且事 ...

  9. php 简单分页

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. python中的 json 模块使用

    (1)python 中生成 json 字符串: import json data = dict(ret=0, msg="Welcome, Login success!") json ...