ECWorks Blog

フォーム内で画像を選ばせるようなインターフェースが出来ないものかと考えていて、今はやりのlightbox的なモーダルダイアログを実現出来ないかと思い、とりあえず自作してはみたのですがイマイチだったので、なんかこういうツールがないかなと思っていたのですが…
やっぱりちゃんとあるんですね！

▼ThickBox 3.1
http://jquery.com/demo/thickbox/

使い方はとっても簡単！
基本的に、ダウンロードしたJavaScriptファイルやcss、それとjQueryをwebroot内に設置して、表示したいもののURLを指定するだけ！iframe形式も、Ajaxによる埋め込みも可能です！
簡単な秘密は、URLにquery string(?～)でパラメータを渡すため、設定が不要だからだと思います。
この方式は欠点もありますが…　このクエリストリングが実サイトの方にも行ってしまうため、たとえばgoogleなんかを呼び出すことは出来ないです。

本体の設置は省略して、viewにはこんな風に書けばOK!

<?php echo $html->css('thickbox'); ?>
<?php echo $javascript->link('jquery'); ?>
<?php echo $javascript->link('thickbox'); ?>
<?php //echo $html->link('テスト', array(
'controller' => 'hoge',
'action' => 'fuga',
'?' => array(
'keepThis' => true, 　　//iframeを使用する場合。Ajaxの場合はこれらを書かない
'TB_iframe' => true, 　//
'height' => '70%',
'width' => '70%',
),
1,
2,
3,
), array(
'class' => 'thickbox',
'title' => 'てすとですよ',
)); ?>

まあ実際に設置してもらうと分かりますが、例えばこんな感じに表示できます。

試しにCakePHPサイトを表示してみると…

あと気をつけなければならない点として、Ajaxとして使う場合、paginate等で遷移させることが困難になるため、こちらもAjaxで実現しなければなりません。CakePHP1.2は基本的にprototype.jsであり、そのままではjQueryと共存が出来ないため、多少工夫がいるようです(詳しくはググってください)。こういった場合はiframeでやるのが手っ取り早いかもですね。この場合は、値の受け渡し等でiframeをまたぐ必要があり、これもまた工夫が必要ですが…

というわけで、とりあえずlightboxチックなユーザインターフェースをご希望でしたら是非thickboxを！

紹介していただいたkaz_29さん、ありがとうございました。大変に助かりました！