jquery更新后怎样在一个站点中使用两个版本号的jQuery
2024-06-11 00:50:03
公司眼下的项目中的右側导航菜单用到了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 = nullthis.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.pinnedOffsetthis.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')) returnvar scrollHeight = jQuery_211(document).height()var scrollTop = this.jQuery_211target.scrollTop()var position = this.jQuery_211element.offset()var offset = this.options.offsetvar offsetTop = offset.topvar offsetBottom = offset.bottomif (typeof offset != 'object') offsetBottom = offsetTop = offsetif (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' : falseif (this.affixed === affix) returnif (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()) returnthis.affixed = affixthis.unpin = affix == 'bottom' ? this.getPinnedOffset() : nullthis.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' && optionif (!data) jQuery_211this.data('bs.affix', (data = new Affix(this, options)))if (typeof option == 'string') data[option]()})}var old = jQuery_211.fn.affixjQuery_211.fn.affix = PluginjQuery_211.fn.affix.Constructor = Affix// AFFIX NO CONFLICT// =================jQuery_211.fn.affix.noConflict = function () {jQuery_211.fn.affix = oldreturn 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.offsetBottomif (data.offsetTop) data.offset.top = data.offsetTopPlugin.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 = nullthis.scrollHeight = 0this.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 = 0if (!jQuery_211.isWindow(this.jQuery_211scrollElement[0])) {offsetMethod = 'position'offsetBase = this.jQuery_211scrollElement.scrollTop()}this.offsets = []this.targets = []this.scrollHeight = this.getScrollHeight()var self = thisthis.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.offsetvar scrollHeight = this.getScrollHeight()var maxScroll = this.options.offset + scrollHeight - this.jQuery_211scrollElement.height()var offsets = this.offsetsvar targets = this.targetsvar activeTarget = this.activeTargetvar iif (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 = targetjQuery_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' && optionif (!data) jQuery_211this.data('bs.scrollspy', (data = new ScrollSpy(this, options)))if (typeof option == 'string') data[option]()})}var old = jQuery_211.fn.scrollspyjQuery_211.fn.scrollspy = PluginjQuery_211.fn.scrollspy.Constructor = ScrollSpy// SCROLLSPY NO CONFLICT// =====================jQuery_211.fn.scrollspy.noConflict = function () {jQuery_211.fn.scrollspy = oldreturn 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
转载于:https://www.cnblogs.com/lcchuguo/p/5244459.html
jquery更新后怎样在一个站点中使用两个版本号的jQuery相关推荐
- 如何在一个表达式中合并两个字典？
我有两个Python字典,我想编写一个返回合并的这两个字典的表达式. 如果update()方法返回其结果而不是就地修改dict,则将是我需要的方法. >>> x = {'a': 1, ...
- 在一个数组中实现两个堆栈
本题要求在一个数组中实现两个堆栈. 函数接口定义: Stack CreateStack( int MaxSize ); bool Push( Stack S, ElementType X,int Ta ...
- 6-2 在一个数组中实现两个堆栈 (8 分)
** 6-2 在一个数组中实现两个堆栈 (8 分) ** 本题要求在一个数组中实现两个堆栈. 函数接口定义: Stack CreateStack( int MaxSize ); bool Push( ...
- 如何在一个站点里使用两个Web.sitemap 或是多个Web.sitemap？
在默认情况下,ASP.NET 站点导航使用一个名为 Web.sitemap 的 XML 文件,该文件描述网站的层次结构.但是,您可能要使用多个站点地图文件或站点地图提供程序来描述整个网站的导航结构. ...
- 苹果手机编辑word_苹果手机更新后卡顿，关闭这两个开关立马恢复，设置之后差点泪崩...
现在很多使用苹果手机的小伙伴,升级系统之后手机就会出现很多穿线问题,不仅没有达到预计的流畅度,升级之后反而出现各种问题,下面给出两种恢复原版流畅度的方法,大家一起来看一下,有用的话记得给小编点个赞哟. ...
- 项目改名后，在idea中出现两个名字
因为你的文件夹名称和你的pom里面设置的项目名称,或者是项目配置里面设置的项目名称不一致所导致的 1.要通过Rename改名字,而不是直接手动改文件夹的名字. 2.pom.xml文件中,之前的项目名字 ...
- 在一个数组中查找两个重复出现的数字
题目如下:现有一个数组长度为n+1,里面存放有1到n-2,顺序不定,其中有两个数字出现了两次,现在要找出那两个数字. 例子A={2, 3, 1, 4, 5, 2, 4}, 这个数组长度为7,存放了1到 ...
- java mysql连接两张表,如何使用Java和MySQL在一个语句中插入两个不同的表？
I am using Java, Spring (NamedParameterJdbcTemplate) and MySQL. My statement looks like this: INSERT ...
- jQuery：在一个回调中处理多个请求
我曾经为Mozilla Developer Network 开发一个新功能,它需要加载一个基本的脚本文件的同时加载一个JSON请求.因为我们使用的是jQuery,意味着要使用 jQuery.getSc ...
- odd在python_在Python中附加两次Odd元素
在本文中,我们将了解如何获取包含一些奇数作为元素的列表,然后将这些奇数重复添加到同一列表中.这意味着如果一个奇数在一个列表中出现两次,那么经过处理后,该奇数将在同一列表中出现四次. 对于此要求,我们将 ...
最新文章
- 判断二叉树是否为平衡二叉树
- QLogic改进ASP合作计划满足共享闪存缓存市场需求
- 【控制】《自动控制原理》胡寿松老师-第2章-控制系统的数学模型
- LC #134 JS
- 【CV】YOLOv4最全复现代码合集（含PyTorch/TF/Keras和Caffe等）
- Hive架构及安装部署（远程数据库模式MySQL）
- MySql数据同步FEDERATED引擎
- 谷歌浏览器插件入门示例
- seo自动工具_【SEO工具】搭建一个网站需要用到哪些SEO工具？
- 帆软报表学习笔记——根据参数查询
- 《推荐系统笔记（十二）》聚类生成标签以及基于标签的TopN推荐
- 在XP下，如何使指定的用户在登录界面可见
- PaddlePaddle︱开发文档中学习情感分类（CNN、LSTM、双向LSTM）、语义角色标注
- C# Graphics 透明 gif 进度条
- 安卓一键新机_知道华为手机变慢的罪魁祸首吗?用这四招两年旧机秒变新机
- 计算机锁屏如何取消密码,笔记本电脑怎么取消锁屏密码
- WikiOI 1139 观光公交 （NOIP2011） 贪心
- ds18b20温度转换指令_DS18B20传感器温度转换指令（ ）。
- 简单的VUE购物车应用
- Unity 动态改变整个粒子特效缩小放大