JQueryとmootoolsの共存
完全に他サイトのコピペ。
ライブラリを読み込む順番が重要で、順番通りに書かないとエラーで動作しなくなるようだ。指定の順番は、jQuery→jQuery.noConflict()→Mootools
これで動作するようになるとのこと。
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> <!-- jQuery.noConflict(); --> </script> <script type="text/javascript" src="mootools.js"></script>
そして、jQueryを使うときの注意で、いつものように$(“div”)のような指定をしていると、
エラーが起きて使えなくなる。そのまま使いうためには、$()をjQuery()という書き方にしないと使えない。
しかし、そのまま使うのも面倒なので、jQueryを変数に代入して簡単に使えるようにする。そのための記述を先ほどの記述に加える。
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> <!-- jQuery.noConflict(); var j$ = jQuery; --> </script> <script type="text/javascript" src="mootools.js"></script>
こうすることで、$()では使えないが、j$()で使う事ができるようになる。
emura 1:54 PM | 2013年1月18日 パーマリンク | ログインして返信する
これはハマれますね。
shimura 1:22 PM | 2013年1月18日 パーマリンク | ログインして返信する
ちょっと知ってる内容だったので、自分が忘れないためにコメント。
といっても、ほぼネットのうけうりです。
以前conflictに気づかなくて悩んでいる方がいました。
javascriptのエラーって、画面が真っ白になったり、
だんまり決め込んだりで、原因がわかりにくいですもんね。
ただ、firefoxのfirebugなり、開発ツールを起動しておけば、
エラーとして出るからまぁ気づけるみたいです。
このconflictの原因は、jQuery.jsとprototype.jsの両方を
読み込んでいたため。
そして、両方で$()という省略形の記述を使用していたためです。
両方とも、省略形の記述方法で、$()って書き方を採用しているせいで、
$()自身からすれば、俺はjQueryの方なのか、prototypeの方なのか
わかんなくなっちゃうから問題らしいです。
記事に書いてあるように、別の変数名をつけるか、
スコープを切って、それぞれ干渉しないようにするか、
そもそも省略形使わないでjQuery()みたいに書くか、
対処法はいろいろあるようですね。
なんでこんなことがおきたかというと、
デザイナーさんが、いつのまにかprototype.jsを読み込む記述を
足してたからみたいです。
知らないと、そんな影響があるなんて思わないですよね。