jQuery.jsとmootool.jsの共存
2008-03-03 (月)カテゴリJavascript
先日からクライアントのJavascript導入の声がいくつかあったので試してみた。
mootoolのFx.Elementsと
コンテンツ表示およびCSSの切り替えをする必要があった。
結論
mootoolとjQueryは共存出来ないごめんなさい…出来ました!
■構成
- jquery.js ← いわずとしれたjQuery
- mootools.js ← mootool
- imageMenu.js ← youmosさんで配布されていたスライドメニュー
- test.js ← jQueryのレイヤ表示のイベントやCSS切り替え関数
test.jsソースの汚さは気にしない気にしない
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(); });
だた、こいつらを
<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側で設定してあげれば良いようですね。
jQuery.noConflict();
jQuery と prototype.js を同時に使う。($(); のコンフリクト回避)
これでmootoolやprototypeでも問題なく動作します。







