THE HAM MEDIA BLOG

jQueryとmootoolsを同時に使う方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
日記
タグ:
javascript
jquery
mootools

jQueryとmootoolsを同時に使う方法

ネタ元:mootoolsとjQueryを一緒に使う方法 | チバのブログ

以前から試してみよう、試してみよう!と何度も思ってやってこなかったことで、
jQueryとMootoolsを同時にしようしたい!という気持ちがあった。

jQueryとprototypeの同時使用は以前から知っていたのですが、
同じ方法でjQueryとMootoolsの同時使用ができるのですね!

jQueryは指定とかが簡単なライブラリだけど、
いろいろな動作をさせるにはmootoolsの方が動きが綺麗だなと思っていた。
海外のサイトでは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$()で使う事ができるようになる。

この記事へのコメント
同じ問題に半日かかっていましたがこの記事のおかげで
一気に解決しました!
助かりましたーありがとうございます!
Posted by rino at 2010年12月25日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る