私は最近はもっぱらjQueryしか使ってないのですが、４〜５年前のトレンドというか、なんというか、prototype派の人もいたわけですよ。
でですね。
「prototype使ってて、今後はjQueryに移行したいけど、今の段階だとprototypeも残したい」みたいな案件もあるんですねぇこれが。
prototype使ってるhtmlにそのままjQuery入れると、”$”が共通して使用しているため、競合してしまってどっちかが動かないか、もしくは両方全く動かない状態に陥ります。
じゃーどうしましょう。
こーしましょう。
まず、prototype.jsから読み込みをします。
で、noConflictの記述をします。
<script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/jquery-x.x.x.js"></script> <script> jQuery.noConflict(); var j$ = jQuery; </script>
上記まで書けたら、解決までほぼ完了。
と言いたいところですが、jQueryで使用している”$”を全て”j$”にする必要があります(jQueryのソースファイルじゃなくて、プラグインで使用している”$”です)。
例えば、jQueryでスクロールを制御しているのであれば、
[javascript]
$(function(){
$(‘a[href^=#]’).click(function() {
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? ‘html’ : href);
var position = target.offset().top;
});
return false;
});
});
[/javascript]
と上記のように書いてあったとして、それを下記のように書き換えます。
[javascript]
j$(function(){
j$(‘a[href^=#]’).click(function() {
var href= j$(this).attr("href");
var target = j$(href == "#" || href == "" ? ‘html’ : href);
var position = target.offset().top;
});
return false;
});
});
[/javascript]
とりあえず全部の”$”を”j$”にすりゃOKです。”$”を”j$”に全置換したらいいんじゃないかしら。
これで競合せずにjQueryとprototypeが使用できるようになります。
でもまーぶっちゃけ、jQueryとprototypeを両方使うなんて普通に考えたらしないんだけど、案件次第でさ…。