【JQuery】と【prototype】を同時に使う

「jquery prototype コンフリクト」あたりのキーワードで検索すればたくさん出てきますので、
あえて書かなくてもいいのですが、自分のための覚え書きと言うことで。

ぼくが請け負っているクライアントさんのサイトでは、
画像のロールオーバーを簡単にするため、独自の【prototype】ライブラリを使っています。
そのため【JQuery】のライブラリを使いたい場合には競合を回避しなくてはいけません。

わずか2行のスクリプト追加と、数ヶ所の書き換えで可能ですので、
メモリーのどこかに格納しておいていただければ役に立つ日が来ると思います。

1.スクリプトの読み込みは 「prototype ⇒ prototypeのライブラリ ⇒
JQuery ⇒ 追加スクリプト（後述） ⇒ JQueryのライブラリ」 の順に行う

2.JQuery本体を読み込んだ直後に以下のスクリプトを追加

<script>
jQuery.noConflict();
var j$ = jQuery;
</script>

3.JQueryのfunctionを以下の通り修正

$(function(){ …
}

となっている部分を

j$(function(){ …
}

のように、j$( … に変更

大抵はこれでうまくいくと思いますが、もしダメな場合は、
JQueryライブラリの外部ファイルのソースにも同様の修正を行います。


See you next tech!