您的位置：首页 > Web前端 > JQuery

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

2016-03-05 11:41 651 查看

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



<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>

// 分别改动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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航