モーダルなユーザーインターフィエイスをお手軽に実現するためにThickBoxは便利です。
Railsに導入する際は、Prototype.jsとJQuery.jsの競合も考える必要があります。

まあ、参考になる記事は沢山あるので読めば誰でも簡単にできることだけど一応メモ。

リソースのダウンロード

ThickBoxのサイトから以下のリソースをダウンロード（リンクを右クリックで保存）します。

jquery-latest.js #thickboxが使うライブラリ。
jquery-latest.pack.js #jqueryのコンパクト板。

thickbox.js #thickboxの通常板
thickbox-compressed.js #thickboxのコンパクト板
thickbox.css #thickbox用のCSS

loadingAnimation.gif #ロード中に表示するアニメーション
macFFBgHack.png #Macで透明な背景をつくるために必要

jquery-latest.pack.jsとthickbox-compressed.jsは可読性のでデバッグには向かないけど、
実際のサイトではそれぞれjquery-latest.js、thickbox.jsリネームしてこちらを使う方がよい。

リソースの配置

railsの仕様にあわせてそれぞれを以下のディレクトリに配置する。appはRailsアプリのルート。

app/public/images
loadingAnimation.gif
macFFBgHack.png

app/public/javascripts
jquery-latest.js
jquery-latest.pack.js #任意
thickbox.js
thickbox-compressed.js #任意

app/public/stylesheets
thickbox.css

こんな感じ。

rhtmlにリンクを書く

thickboxを使いたい画面のrhtmlのheadタグ内に使用するリソースへのリンクを書く。
ここでprototypeとのコンフリクトを避けるためにスクリプトを追加。

ここでrhtmlにthickbox用のリンクと表示するhtmlを書く。
ちなみにprototype.jsは別の用途で必要になる前提で入れてある。必要ないなら任意で外せばよい。

< %= stylesheet_link_tag ‘thickbox’ %>
< %= javascript_include_tag(”prototype”) %>
< %= javascript_include_tag(”jquery”) %>
<script>
jQuery.noConflict(); // jQueryのコンフリクトを避ける機能をオンにする。
var j$ = jQuery; // jQueryをj$()に書き換える。
</script>
< %= javascript_include_tag(”thickbox”) %>

thickboxの変更

$()の書き換え

thickboxないでは$()はj$()として使用する必要があるので全部書き換える。
正規表現などを使い上手に全置換すれば問題ないハズ。

loadingAnimation.gifのパスを書き換える

gifはちゃんとimageフォルダに入れたいので、thickbox.jsに持ち込んでいるパスを書き換える

var tb_pathToImage = “loadingAnimation.gif”;

以下のように修正
var tb_pathToImage = “../images/loadingAnimation.gif”;

※thickbox.jsとthickbox-compressed.jsを使い分けるのであれば両方に修正が必要になるので注意

CSSの修正

実は同じようにcss内にもリソース間のリンクが存在する。
これも以下のように修正。

.TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}

以下のように修正
.TB_overlayMacFFBGHack {background: url(../images/macFFBgHack.png) repeat;}

これで使えます。

Posted at Sunday, August 12th, 2007comments (2) | trackback | category: programming, rails

Read More