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图标,并且已 ...
随机推荐
- DTO学习系列之AutoMapper（三）
本篇目录: Custom Type Converters-自定义类型转换器 Custom Value Resolvers-自定义值解析器 Null Substitution-空值替换 Containe ...
- 头文件 .h 与源文件 .ccp 的区别
.h 文件一般是用来定义的,比如定义函数.类.结构体等: .cpp 文件则是对头文件的定义进行实现. include .h文件,可以调用你声明的函数.类等.当然,比较简单的类.函数,你也可以直接在头文 ...
- c#串口编程时,忽略跨线程检查报错
1.直接在main_Form_Load的初始化中加 //忽略跨线程检查 // System.Windows.Forms.Control.CheckForIllegalCrossThreadCalls ...
- android中细节效果总结
android中细节效果总结 andorid取消最上方的标题同时全屏显示 Source code protected void onCreate(Bundle savedInstanceS ...
- 一个商品练习的py
#!/usr/bin/env python # coding=utf-8 # by 星空刺 qian = int(raw_input("请输入当前money:")) gongzi ...
- Hdu1093
#include <stdio.h> int main() { int T,n; ; while(scanf("%d",&T)!=EOF){ while(sca ...
- asp.net mvc4 easyui datagrid 增删改查分页 导出 先上传后导入 NPOI批量导入 导出EXCEL
效果图 数据库代码 create database CardManage use CardManage create table CardManage ( ID ,) primary key, use ...
- js实现选项卡切换的三种方式
前两种主要实现一个选项卡的切换,第三种使用闭包看书,构造函数实现多个选项卡的切换: 1.第一种实现实现效果为: 实现代码为: <!doctype html> <!DOCTYPE ht ...
- HoG feature for human detection（HoG 行人识别）
本文大部分内容总结于其他文章 1.介绍 HOG(Histogram of Oriented Gradient)是2005年CVPR会议上,法国国家计算机科学及自动控制研究所的Dalal等人提出的一种解 ...
- QtCreator调试传入运行参数
QtCreator是非常不错的IDE,最近在做的Qt命令行应用,因为调试的环境不同等问题,需要在调试的时候为 main() 传入参数.度娘了半天,没找到方法,只能自力更生.后来在“项目-构建和运行-运 ...