jquery更新后怎样在一个站点中使用两个版本号的jQuery
公司眼下的项目中的右側导航菜单用到了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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta charset="utf-8">
<title>test</title>
<link type="text/css" rel="stylesheet" href="src2.css" />
<script type="text/javascript" language="javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">var jQuery_211 = $.noConflict(true);</script>
<script type="text/javascript" language="javascript" src="affix.js"></script>
<script type="text/javascript" language="javascript" src="scrollspy.js"></script>
</head>
<body>
<div class="sideToolbar" id="sideToolbar">
<ul class="nav">
<li><a href="#zixun">最新资讯</a></li>
<li><a href="#meiguo">留学美国</a></li>
<li><a href="#jiajiao">培训家教</a></li>
<li><a href="#xuexiao">洛杉矶学校</a></li>
</ul>
<a class="back-to-top" href="#pageCenter" title="返回顶部"></a>
<a class="dim-code" href="http://t.qq.com/chineseinla_com" title="微博: @chineseinla_com, 微信公众平台：chineseinla。" target="_blank"></a>
</div>
<div class="test" id="pageCenter">
<h1>内容</h1>
<div class="content1 color1" id="zixun"><h2 >最新资讯</h2></div>
<div class="content1 color2" id="meiguo"><h2>留学美国</h2></div>
<div class="content1 color3" id="jiajiao"><h2>培训家教</h2></div>
<div class="content1 color4" id="xuexiao"><h2>洛杉矶学校</h2></div>
</div>
<div class="test" id="footer">
</div>
</body>
<script type="text/javascript">
if (document.body.offsetWidth >= 1190) {
jQuery_211('#sideToolbar').show();
jQuery_211('#sideToolbar').affix({
offset: {
top: 100,
bottom: function () {return this.bottom=jQuery_211('#footer').outerHeight(true)}
}
});
jQuery_211('body').scrollspy({ target: '#sideToolbar' });
window.onload = function(){
var div = document.getElementById('pageCenter');
var divx1 = div.offsetLeft + div.offsetWidth;
var divy1 = document.documentElement.clientHeight / 2 - 200;
var div2 = document.getElementById('sideToolbar');
//div2.style.top=divy1+'px';
div2.style.left=divx1+'px';
}
}
</script>
</html>
affix.js
/* ========================================================================
* Bootstrap: affix.js v3.2.0
* http://getbootstrap.com/javascript/#affix
* ========================================================================
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */ +function (jQuery_211) {
'use strict'; // AFFIX CLASS DEFINITION
// ====================== var Affix = function (element, options) {
this.options = jQuery_211.extend({}, Affix.DEFAULTS, options) this.jQuery_211target = jQuery_211(this.options.target)
.on('scroll.bs.affix.data-api', jQuery_211.proxy(this.checkPosition, this))
.on('click.bs.affix.data-api', jQuery_211.proxy(this.checkPositionWithEventLoop, this)) this.jQuery_211element = jQuery_211(element)
this.affixed =
this.unpin =
this.pinnedOffset = null this.checkPosition()
} Affix.VERSION = '3.2.0' Affix.RESET = 'affix affix-top affix-bottom' Affix.DEFAULTS = {
offset: 0,
target: window
} Affix.prototype.getPinnedOffset = function () {
if (this.pinnedOffset) return this.pinnedOffset
this.jQuery_211element.removeClass(Affix.RESET).addClass('affix')
var scrollTop = this.jQuery_211target.scrollTop()
var position = this.jQuery_211element.offset()
return (this.pinnedOffset = position.top - scrollTop)
} Affix.prototype.checkPositionWithEventLoop = function () {
setTimeout(jQuery_211.proxy(this.checkPosition, this), 1)
} Affix.prototype.checkPosition = function () {
if (!this.jQuery_211element.is(':visible')) return var scrollHeight = jQuery_211(document).height()
var scrollTop = this.jQuery_211target.scrollTop()
var position = this.jQuery_211element.offset()
var offset = this.options.offset
var offsetTop = offset.top
var offsetBottom = offset.bottom if (typeof offset != 'object') offsetBottom = offsetTop = offset
if (typeof offsetTop == 'function') offsetTop = offset.top(this.jQuery_211element)
if (typeof offsetBottom == 'function') offsetBottom = offset.bottom(this.jQuery_211element) var affix = this.unpin != null && (scrollTop + this.unpin <= position.top) ? false :
offsetBottom != null && (position.top + this.jQuery_211element.height() >= scrollHeight - offsetBottom) ? 'bottom' :
offsetTop != null && (scrollTop <= offsetTop) ? 'top' : false if (this.affixed === affix) return
if (this.unpin != null) this.jQuery_211element.css('top', '') var affixType = 'affix' + (affix ? '-' + affix : '')
var e = jQuery_211.Event(affixType + '.bs.affix') this.jQuery_211element.trigger(e) if (e.isDefaultPrevented()) return this.affixed = affix
this.unpin = affix == 'bottom' ? this.getPinnedOffset() : null this.jQuery_211element
.removeClass(Affix.RESET)
.addClass(affixType)
.trigger(jQuery_211.Event(affixType.replace('affix', 'affixed'))) if (affix == 'bottom') {
this.jQuery_211element.offset({
top: scrollHeight - this.jQuery_211element.height() - offsetBottom
})
}
} // AFFIX PLUGIN DEFINITION
// ======================= function Plugin(option) {
return this.each(function () {
var jQuery_211this = jQuery_211(this)
var data = jQuery_211this.data('bs.affix')
var options = typeof option == 'object' && option if (!data) jQuery_211this.data('bs.affix', (data = new Affix(this, options)))
if (typeof option == 'string') data[option]()
})
} var old = jQuery_211.fn.affix jQuery_211.fn.affix = Plugin
jQuery_211.fn.affix.Constructor = Affix // AFFIX NO CONFLICT
// ================= jQuery_211.fn.affix.noConflict = function () {
jQuery_211.fn.affix = old
return this
} // AFFIX DATA-API
// ============== jQuery_211(window).on('load', function () {
jQuery_211('[data-spy="affix"]').each(function () {
var jQuery_211spy = jQuery_211(this)
var data = jQuery_211spy.data() data.offset = data.offset || {} if (data.offsetBottom) data.offset.bottom = data.offsetBottom
if (data.offsetTop) data.offset.top = data.offsetTop Plugin.call(jQuery_211spy, data)
})
}) }(jQuery_211);
scrollspy.js
/* ========================================================================
* Bootstrap: scrollspy.js v3.2.0
* http://getbootstrap.com/javascript/#scrollspy
* ========================================================================
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */ +function (jQuery_211) {
'use strict'; // SCROLLSPY CLASS DEFINITION
// ========================== function ScrollSpy(element, options) {
var process = jQuery_211.proxy(this.process, this) this.jQuery_211body = jQuery_211('body')
this.jQuery_211scrollElement = jQuery_211(element).is('body') ? jQuery_211(window) : jQuery_211(element)
this.options = jQuery_211.extend({}, ScrollSpy.DEFAULTS, options)
this.selector = (this.options.target || '') + ' .nav li > a'
this.offsets = []
this.targets = []
this.activeTarget = null
this.scrollHeight = 0 this.jQuery_211scrollElement.on('scroll.bs.scrollspy', process)
this.refresh()
this.process()
} ScrollSpy.VERSION = '3.2.0' ScrollSpy.DEFAULTS = {
offset: 10
} ScrollSpy.prototype.getScrollHeight = function () {
return this.jQuery_211scrollElement[0].scrollHeight || Math.max(this.jQuery_211body[0].scrollHeight, document.documentElement.scrollHeight)
} ScrollSpy.prototype.refresh = function () {
var offsetMethod = 'offset'
var offsetBase = 0 if (!jQuery_211.isWindow(this.jQuery_211scrollElement[0])) {
offsetMethod = 'position'
offsetBase = this.jQuery_211scrollElement.scrollTop()
} this.offsets = []
this.targets = []
this.scrollHeight = this.getScrollHeight() var self = this this.jQuery_211body
.find(this.selector)
.map(function () {
var jQuery_211el = jQuery_211(this)
var href = jQuery_211el.data('target') || jQuery_211el.attr('href')
var jQuery_211href = /^#./.test(href) && jQuery_211(href) return (jQuery_211href
&& jQuery_211href.length
&& jQuery_211href.is(':visible')
&& [[jQuery_211href[offsetMethod]().top + offsetBase, href]]) || null
})
.sort(function (a, b) { return a[0] - b[0] })
.each(function () {
self.offsets.push(this[0])
self.targets.push(this[1])
})
} ScrollSpy.prototype.process = function () {
var scrollTop = this.jQuery_211scrollElement.scrollTop() + this.options.offset
var scrollHeight = this.getScrollHeight()
var maxScroll = this.options.offset + scrollHeight - this.jQuery_211scrollElement.height()
var offsets = this.offsets
var targets = this.targets
var activeTarget = this.activeTarget
var i if (this.scrollHeight != scrollHeight) {
this.refresh()
} if (scrollTop >= maxScroll) {
return activeTarget != (i = targets[targets.length - 1]) && this.activate(i)
} if (activeTarget && scrollTop <= offsets[0]) {
return activeTarget != (i = targets[0]) && this.activate(i)
} for (i = offsets.length; i--;) {
activeTarget != targets[i]
&& scrollTop >= offsets[i]
&& (!offsets[i + 1] || scrollTop <= offsets[i + 1])
&& this.activate(targets[i])
}
} ScrollSpy.prototype.activate = function (target) {
this.activeTarget = target jQuery_211(this.selector)
.parentsUntil(this.options.target, '.active')
.removeClass('active') var selector = this.selector +
'[data-target="' + target + '"],' +
this.selector + '[href="' + target + '"]' var active = jQuery_211(selector)
.parents('li')
.addClass('active') if (active.parent('.dropdown-menu').length) {
active = active
.closest('li.dropdown')
.addClass('active')
} active.trigger('activate.bs.scrollspy')
} // SCROLLSPY PLUGIN DEFINITION
// =========================== function Plugin(option) {
return this.each(function () {
var jQuery_211this = jQuery_211(this)
var data = jQuery_211this.data('bs.scrollspy')
var options = typeof option == 'object' && option if (!data) jQuery_211this.data('bs.scrollspy', (data = new ScrollSpy(this, options)))
if (typeof option == 'string') data[option]()
})
} var old = jQuery_211.fn.scrollspy jQuery_211.fn.scrollspy = Plugin
jQuery_211.fn.scrollspy.Constructor = ScrollSpy // SCROLLSPY NO CONFLICT
// ===================== jQuery_211.fn.scrollspy.noConflict = function () {
jQuery_211.fn.scrollspy = old
return this
} // SCROLLSPY DATA-API
// ================== jQuery_211(window).on('load.bs.scrollspy.data-api', function () {
jQuery_211('[data-spy="scroll"]').each(function () {
var jQuery_211spy = jQuery_211(this)
Plugin.call(jQuery_211spy, jQuery_211spy.data())
})
}) }(jQuery_211);
src2.css
@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
body {
text-align:center;
position: relative;
}
a{text-decoration:none;}
a:link{color:#333;}
a:visited{color:#333;}
a:hover{color:#78b9e3;}
a:active{color:#333;}
.test {
width: 1030px;
height: 2048px;
background: #ccc;
position: relative;
display: inline-block;
}
.content1 {
width:100%;
height:500px;
}
.color1 {
background-color:red;
}
.color2 {
background-color:blue;
}
.color3 {
background-color:pink;
}
.color4 {
background-color:green;
}
/* sideToolbar 右側导航菜单 yangyao 2014/10/27 */
.sideToolbar {
width: 76px;
font-size: 14px;
text-align: center;
display:none;
position:fixed;
}
.sideToolbar .nav {
margin:0;
padding:0;
list-style-type: none;
}
.sideToolbar .nav>li>a {
width:100%;
height: 100%;
display: block;
line-height: 40px;
background:#ededed;
overflow: hidden;
border-top: 1px solid #ffffff;
}
.sideToolbar .nav>li>a:hover {
font-weight: bold;
color: #ffffff;
background:#77B7E3;
}
.sideToolbar .nav>.active a {
font-weight: bold;
color: #ffffff;
background:#77B7E3;
}
.sideToolbar .back-to-top {
width:75px;
height: 33px;
background: url(./images/jiantou.jpg) repeat-x top;
border-top: 1px solid #ffffff;
display: block;
}
.sideToolbar .back-to-top:hover {
background: url(./images/jiantou_over.jpg) repeat-x top;
}
.sideToolbar .dim-code {
width:75px;
height: 74px;
background: url(./images/erweima.jpg) repeat-x top;
border-top: 1px solid #ffffff;
display: block;
}
.affix-top{position:fixed;top:30%;}
.affix{position:fixed;top:30%;}
.affix-bottom{position:absolute;}
/* end sideToolbar 右側导航菜单 */
图片
erweima.jpg
jiantou.jpg
jiantou_over.jpg
jquery更新后怎样在一个站点中使用两个版本号的jQuery的更多相关文章
- [PTA] 数据结构与算法题目集 6-7 在一个数组中实现两个堆栈
//如果堆栈已满,Push函数必须输出"Stack Full"并且返回false:如果某堆栈是空的,则Pop函数必须输出"Stack Tag Empty"(其中 ...
- jQuery：在一个回调中处理多个请求
我曾经为Mozilla Developer Network 开发一个新功能,它需要加载一个基本的脚本文件的同时加载一个JSON请求.因为我们使用的是jQuery,意味着要使用 jQuery.getSc ...
- MySQL 如何在一个语句中更新一个数值后返回该值 -- 自增长种子竞态问题处理
什么是竞态问题? 假设有一个计数器,首先当前值自增长,然后获取到自增长之后的当前值.自增长后的值有可能被有些操作用来当做唯一性标识,因此并发的操作不能允许取得相同的值. 为什么不能使用使用UPDATE ...
- 转 mvc项目中,解决引用jquery文件后智能提示失效的办法
mvc项目中,解决用Url.Content方法引用jquery文件后智能提示失效的办法 这个标题不知道要怎么写才好, 但是希望文章的内容对大家有帮助. 场景如下: 我们在用开发开发程序的时候,经常 ...
- net网站发布－允许更新此预编译站点 及修改发布后内容
我们可以通过如下的方法发布VS2010的网站: “生成”→“发布网站”:弹出对话框! 在打开的对话框中,有一个选项是至关重要的,那就是“允许更新此预编译站点”: “允许更新此预编译站点”这一项,默认情 ...
- WebGIS中以version方式实现代码更新后前端自动读取更新代码的方法
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1. 前言 GIS代码进行更新后,由于用户前端已有缓存,导致更新的功能不 ...
- 如何在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 ...
- SharePoint Iframe 报错“此内容不能显示在一个框架中”
问题描述 我们SharePoint站点用Excel Service发布的Excel,需要Iframe到其他系统中,但是,Iframe的时候发现报错“此内容不能显示在一个框架中”. 后来,尝试在其他系统 ...
- 网站简介-为什么网站的ICO图标更新后，ie浏览器没有更新过来？
为什么网站的ICO图标更新后,ie浏览器没有更新过来? 如何更新本地ico图标? 收藏夹里的网址访问后网站ico小图标怎么不会更新,还是没图标的. 如果制作了一个新的favicon.ico图标,并且已 ...
随机推荐
- android studio 报ambiguous method call
如题,在android studio中调用this.toString时,提示的错误信息是ambiguous method call. both get class () in object and g ...
- Windows Server 2008搭建域控制器《转载51CTO.com》
Windows Server 2008搭建域控制器 引入 在小型网络中,管理员通常独立管理每一台计算机,如最为常用的用户管理.但当网络规模扩大到一定程度后,如超过 10 台计算机,而每台计算机上有 1 ...
- [转] iOS使用NSMutableAttributedString 实现富文本（不同颜色字体、下划线等）
转自: 在iOS开发中,常常会有一段文字显示不同的颜色和字体,或者给某几个文字加删除线或下划线的需求.之前在网上找了一些资料,有的是重绘UILabel的textLayer,有的是用html5实现的,都 ...
- My way on Linux - [Shell基础] - Bash Shell中判断文件、目录是否存在或者判断其是否具有某类属性(权限)的常用方法
Conditional Logic on Files # 判断文件是否存在及文件类型 -a file exists. #文件存在 -b file exists and is a block speci ...
- asp.net事件委托易理解实例
比如说一个公司(场景),你是老板,手下有两个员工,小张和小王. 你命令小王,如果小张玩游戏,则小王扣去小张500元钱.这就是现实中的委托.实际上,在写程序中,程序员就是老板,小张和小王就是两个对象.小 ...
- datatable列操作
DataTable myDt =dt; //删除列 myDt.Columns.Remove("minArea"); myDt.Columns.Remove("max ...
- c#字符串方法
作者: 常浩 staticvoid Main(string[] args) { string s =""; //(1)字符访问(下标访问s[i]) s ="ABCD&qu ...
- Iterable 超级接口
这是一个老祖宗,一代一代往下拨 collection 的方法如下,是一个跟接口方法如下,见API collection : add():添加一个元素 addAll():添加一组元素 clear(); ...
- OpenGL ES 2.0 光照
基本的光照 光照分成了3种组成元素(3个通道):环境光.散射光以及镜面光. 材质的反射系数实际指的就是物体被照射处的颜色,散射光强度指的是散射光中的RGB(红.绿.蓝)3个色彩通道的强度. 环境光 指 ...
- ZJOI 最小割 CQOI 不同的最小割 (最小割分治)
题目1 ZJOI 最小割 题目大意: 求一个无向带权图两点间的最小割,询问小于等于c的点对有多少. 算法讨论: 最小割 分治 代码: #include <cstdlib> #include ...