[英]How to solve jQuery and mootoools conflict?
我用
<script type="text/javascript" src="jquery-1.2.2.pack.js"> </script>
加载jquery,然后加载包含以下内容的外部脚本:
var jkpanel={
controltext: 'menu',
$mainpanel: null, contentdivheight: 0,
openclose:function($, speed){
this.$mainpanel.stop() //stop any animation
if (this.$mainpanel.attr('openstate')=='closed')
this.$mainpanel.animate({top: 0}, speed).attr({openstate: 'open'})
else
this.$mainpanel.animate({top: -this.contentdivheight+'px'}, speed).attr({openstate: 'closed'})
},
init:function(file, height, speed){
jQuery(document).ready(function($){
jkpanel.$mainpanel=$('<div id="dropdownpanel"><div class="contentdiv"></div><div class="control">'+jkpanel.controltext+'</div></div>').prependTo('body')
var $contentdiv=jkpanel.$mainpanel.find('.contentdiv')
var $controldiv=jkpanel.$mainpanel.find('.control').css({cursor: 'wait'})
$contentdiv.load(file, '', function($){
var heightattr=isNaN(parseInt(height))? 'auto' : parseInt(height)+'px'
$contentdiv.css({height: heightattr})
jkpanel.contentdivheight=parseInt($contentdiv.get(0).offsetHeight)
jkpanel.$mainpanel.css({top:-jkpanel.contentdivheight+'px', visibility:'visible'}).attr('openstate', 'closed')
$controldiv.css({cursor:'hand', cursor:'pointer'})
})
jkpanel.$mainpanel.click(function(){jkpanel.openclose($, speed)})
})
}
}
//Initialize script: jkpanel.init('path_to_content_file', 'height of content DIV in px', animation_duration)
jkpanel.init('1', '80px', 1000)
并且当然也使用mootools插件。
我的问题是我应该如何使用var $j = jQuery.noConflict();
在上面的脚本中,以防止发生冲突
将所有依赖jQuery的JavaScript封装在一个闭包中,以防止名称空间冲突,如下所示:
// Start closure to prevent namespace conflicts
;(function($) {
// Whatever code you want that relies on $ as the jQuery object
// End closure
})(jQuery);
看起来很奇怪,但是语法是正确的(是的,第一行以分号开头)。 这会自动用jQuery
替换$
对象,而jQuery和mootools都使用$
对象。 由于您同时使用这两种方法,因此应将所有jQuery代码包装在这样的闭包中(每个.js文件或script
标记一个)。
如果只是问题,则加载MooTools,然后加载jQuery,然后MooTools无法工作,因为jQuery接管了dollar函数,那么您可能只需要这样的代码:
<script type="text/javascript" src="mootools.js"> </script>
<script type="text/javascript" src="jquery-1.2.2.pack.js"> </script>
<script type="text/javascript">
jQuery.noConflict();
</script>
那应该使jQuery放弃$()
。 问题中的代码已经完成了另一件方便的事情,即使用ready事件处理程序中的参数作为在本地为jQuery
对象使用更短名称的一种方式。
我强烈建议阅读有关使用其他库的jQuery页面,也可能noConflict()
函数的文档。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.