【CakePHP】thickbox(+jQuery)で簡単モーダルダイアログ

フォーム内で画像を選ばせるようなインターフェースが出来ないものかと考えていて、今はやりの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' => 'てすとですよ',
)); ?>

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

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

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

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

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