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$」に変換。
※!うまくいかなかったときのために変換前のファイルはとっておくこと!

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








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

calendar

S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
30      
<< April 2017 >>

たいやき

selected entries

categories

archives

recommend

recommend

recommend

終わり続ける世界のなかで
終わり続ける世界のなかで (JUGEMレビュー »)
粕谷 知世
2011年度SOG賞 シスターフッド賞

recommend

魔法少女まどか☆マギカ 1 【通常版】 [DVD]
魔法少女まどか☆マギカ 1 【通常版】 [DVD] (JUGEMレビュー »)

(全6巻)2011年度SOG賞 シスターフッド賞

recommend

recommend

音楽の在りて
音楽の在りて (JUGEMレビュー »)
萩尾 望都
2011年度SOG賞 候補作

recommend

私のミトンさん
私のミトンさん (JUGEMレビュー »)
東 直子
2011年度SOG賞 候補作

recommend

recommend

recommend

recommend

recommend

玉工乙女
玉工乙女 (JUGEMレビュー »)
勝山海百合
2010年度SOG賞 候補作

recommend

recommend

MODxでつくる!最強のCMSサイト
MODxでつくる!最強のCMSサイト (JUGEMレビュー »)
MODxフォーラムJapanese Co
初心者はとりあえず買っとけ。

links

profile

search this site.

others

mobile

qrcode

powered

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