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图标,并且已 ...
随机推荐
- Dynamics CRM 2016 使用Plug-in Trace Log调试插件
1.写插件 首先,让我们写一个简单的插件来测试新插件跟踪日志功能.请注意,在下面的示例代码中,我们增加ITracingService的一个实例,以及记录有关插件的执行信息记录的一些键值: 2.注册插件 ...
- Sass函数--列表函数
列表函数简介 列表函数主要包括一些对列表参数的函数使用,主要包括以下几种: length($list):返回一个列表的长度值: nth($list, $n):返回一个列表中指定的某个标签值 join ...
- WebApi2官网学习记录---Attribute Routing
从WebApi 1迁移到WebAPI 2要改变配置代码如下: WebApi 1: protected void Application_Start() { // WARNING - Not compa ...
- 什么是MemCache
Memcache是一个高性能的分布式的内存对象缓存系统,通过在内存里维护一个统一的巨大的hash表,它能够用来存储各种格式的数据,包括图像.视频.文件以及数据库检索的结果等.简单的说就是将数据调用到内 ...
- 操作html标签之找到标签
引入 丰富多彩的html标签构成了网页.例如p,div,li,ul,a......…….它们都有自己默认的样式,且各不一样,例如h1标签就比p标签的margin要大一些.我们学习css的目的是为了改变 ...
- 使用json常用到的包有以下六个
使用json常用到的包有以下六个 1. commons-logging-1.0.4.jar 2. commons-lang-2.3.jar 3. commons-collections-3.2.jar ...
- centos mysql 数据存储目录安装位置
rpm -ql mysql查看安装位置 MYSQL默认的数据文件存储目录为/var/lib/mysql.假如要把目录移到/home/data下需要进行下面几步: 1.home目录下建立data目录 c ...
- HTML5 的段落首行缩进
text-indent:0em;表示当前行不需要缩进,文本顶头开始.这个属性可以用在 div p等元素下面 文本首行的缩进(在首行文字之前插入指定的长度) p { line-height: 2em ...
- (转)syslog日志等级
设施.优先级”(facility.priority)设施(facility): kern 0 内核日志消息 user 1 随机的用户日志消息 mail 2 邮件系统日志消息 daemon 3 系统守护 ...
- Linux iostat监测IO状态(转)
Linux iostat监测IO状态 2010-03-1 | 13:13分类:Linux,技术细节 | 标签:Linux | 53,945 views Linux系统出现了性能问题,一般我 ...