【メモ】 prototype.jsとjQuery.jsを共存させてThickboxを動かす

とあるサイトで、Thickboxというライブラリを使って小窓をレイヤー表示させているんですが、
このライブラリはjQueryに依存して動いているんですね。

ThickBox 3.1

で、僕は今のところprototype.jsしかわからない、と。。


常識的に考えれば、ライブラリに依存しない形でスクリプトを書くか、
この際jQueryで書けるようにもなっとけよバカ野郎！ということだと思うんだけど、
とりあえずその前に共存できるのかなーと言うところに興味があったので試してみた。


参考にしたのはこのあたり。

jQuery と prototype.js を同時に使う。（$(); のコンフリクト回避）｜JavaScriptプログラムメモ｜プログラムメモ
jQueryとprototype.jsp を共存させる方法 | AMsoft space



大事なのは次の3点。

1. prototype.jsをjQuery.jsより先にロードする
2. jQueryとThickboxの間に、コンフリクト回避の呪文を書く
3. Thickboxの中身を書き換える

1はそのままですね。

2は、こんな感じのスクリプト。

var $j = jQuery.noConflict();

何をしているかというと、jQueryの中で使われている$();を、
$j();に変換しているってことですね。それでコンフリクトを避けようと。なるほど。
これは、Thickboxの前に記述するのが吉です。後にすると動かないっぽ。


で、3はかなりの力業ですが、テキストエディタでざっくり変換して、
Thickbox.conflict.jsとでも名前を付けて保存すると。


以上を盛り込んだのがこちら。

Thickbox with prototype.js


おおー動きますねぇ。素晴らしい。
もしやむを得ない場合はこれでいけますよ、と。



…でもまぁ多分、jQuery.jsに習熟にした人から見れば、
いちいち$j()で書くとかあり得ないよなーそんなのだるすぎるし。
同じこと出来るライブラリを探してきてた方がよさげ。

もちろん、ベストはどちらにも依存しないスクリプトを書く、だけどさ。