jQuery.jsとmootool.jsの共存

2008-03-03 (月)カテゴリJavascriptタグ

先日からクライアントのJavascript導入の声がいくつかあったので試してみた。
mootoolFx.Elements
コンテンツ表示およびCSSの切り替えをする必要があった。

結論
mootoolとjQueryは共存出来ないごめんなさい…出来ました!

■構成

test.jsソースの汚さは気にしない気にしない

Java Script
function showMenu(title){
	$("#layer1").hide();
	$("#layer2").hide();
	$("#layer3").hide();

	if(title=="title1"){
		$("#layer1").show();
	} else if(title=="title2"){
		$("#layer2").show();
	} else if(title=="title3"){
		$("#layer3").show();
	}
	changeCss(posi);
}
function changeCss(titleName){
	$('link[@rel*=style][@title]').each(function(i){
		this.disabled = true;
		if(this.getAttribute('title') == titleName) this.disabled = false;
	});
}
$(document).ready(function(){ changeCss(); });

だた、こいつらを

HTML
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/mootools.js" type="text/javascript"></script>
<script src="js/imageMenu.js" type="text/javascript"></script>
<script src="js/test.js" type="text/javascript"></script>

と順番に並べるとIE6,7共にエラー…orz
firefoxはおっけーなのに。。
どうも「$(document).ready()」自体がエラー出てることを考えると$()自体の呼び方が相殺されてるっぽい。
スクリプトの呼び出し順を変えるとエラーの出方が変わります(゚д゚;)アワワ
確かにmootoolにも$()の考え方も一応あるみたいだし…もうちょっと調べないと。情報求ム

■解決済み(追記)
コンフリクト回避をjQuery側で設定してあげれば良いようですね。

Java Script
jQuery.noConflict();

jQuery と prototype.js を同時に使う。($(); のコンフリクト回避)

これでmootoolやprototypeでも問題なく動作します。

コメントをする

http://mizoochi.com/archives/214.html/trackback