mootoolsとjQueryを一緒に使う方法

  • 2011.08.22 Monday
  • 17:08
G研のサイトでは使ってないけど、他のサイトで苦労したのでメモ。

modxのデフォルトテンプレートに入っているheader menuはwayfinderで作られてて、mootoolsというjavascriptのライブラリを使って、かっこよくにょろにょろと下に伸びる。
これいいわ、と使っていたのだけど、その後いろいろあって、jQueryのライブラリを使ったのにいいのがあって、一緒に使いたくなった。

使いたかったのは
複数のブロック要素の高さを揃えてくれる「fixHeight.js」

css3のdisplay: box;を使えばjavascriptいらないのだけど、相変わらずIEがダメだし、他のブラウザもいまいち挙動がぶれるしで、残念ながらまだ実用はきびしい。
なので fixHeight.js をつかってみることに。

しかしmootoolsと一緒に使うと、やっぱりというか、動かない…orz
どちらかのみなら問題なく動くのに。

mootools jQuery でググルと悩んでる人いっぱいいて、回避作も複数でてきた。
結局一番わかりやすかった
jQueryとmootoolsを同時に使う方法
を参考にしました。

問題なのは読み込む順番。
-------順番------
1番目 jQuery.js
2番目 fixHeight.js ←ボックスの高さそろえる
間に
jQuery.noConflict();
var j$ = jQuery;
3番目 mootools.js
4番目 drop_down_menu.js ←にょろにょろメニュー
------------------
以下にhead部分のソースです。
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/fixHeight.js"></script>
<script type="text/javascript">
<!--
jQuery.noConflict();
var j$ = jQuery;
-->
</script>
<script type="text/javascript" src="manager/media/script/mootools/mootools.js"></script>
<script type="text/javascript" src="assets/templates/modxhost/drop_down_menu.js"></script>

さらにjquery.jsとfixHeight.jsを開いて
「$」をすべて「j$」に変換。
※!うまくいかなかったときのために変換前のファイルはとっておくこと!

保存して指定の場所にアップロードしたら、どちらもうまく動きました。

calendar

S M T W T F S
     12
3456789
10111213141516
17181920212223
24252627282930
31      
<< March 2024 >>

たいやき

selected entries

categories

archives

links

profile

search this site.

others

mobile

qrcode

powered

無料ブログ作成サービス JUGEM