dev.convexstyle.net | fancybox + URL 書き換え + Zend Framework

Javascript と言えば、自前か JQuery 関連以外はあんまり使ったことが無いので library とか良く分からないですが、最近 thickbox 風の fancybox っていうのをプロジェクトで初めて使ってみた。使い方は物凄く簡単であえて説明をする必要もないので使用方法を見てもらうとして、こんな感じの見た目。

ここ

で、決まった URL 静的に html に記述、もしくは動的な URL を PHP 等でレンダリングして fancybox を割り当てるのは簡単なんですが、DOM 生成後に fancybox への URL をイベント毎に変更して割り当てるにはどうするんだと思って少しはまったのでメモ。

例えばユーザーの入力要素を付加した動的な URL（Zend Framework では Get 変数や UserParam 変数）を iframe 表示する場合。表示エリアが十分で、非同期に Ajax 処理できる場合は特に fancybox を選択する必要が無いので問題ないんだけど、表示スペースの問題でポップアップが必要な場合に当てはまるかも。ちなみに fancybox には thickbox の tb_show や tb_remove 等の様に関数からの処理が出来ない模様。

例えば、Zend Framework で signup/index/email/任意のメールアドレス/?iframe という URL 形式で fancybox を起動したい場合。fancybox は a タグの href に既に値が設定されている前提で起動するので、クリックイベントによって fancybox が起動してしまうから普通にはクリック時に書き換えが出来ない。無理やり下記の様に変更しようとしても、fancybox の起動の方が速いので、href の変更は反映されない。

<script language="Javascript" type="text/javascript">
<!--
    $(document).ready(function(){
        $('a#testClick').fancybox({
            'frameWidth': 800,
            'frameHeight': 600
        });
        $('a#testClick').click(function(){
            var _email = $('input#email').val();
            $('a#testClick').attr('href', '/signup/index/email/' + _email + '/?iframe');
        });
    });
//-->
</script>
<form id="testForm">
    <input type="text" id="email" />
</form>
<a href="http://maps.google.com/?iframe" id="testClick">test</a>

なので、クリックイベント時に URL 生成するのと、fancybox を切り分けたいと思い、空の a タグを作成し、この空の方へ fancybox を割り当て、クリックイベントを発生させる a タグはその URL を変更する様に変更し、最後に、JQuery の click イベントを実行することで回避できた。本来は maps.google.com を表示するはずだけど、それはされない。

<script language="Javascript" type="text/javascript">
<!--
    $(document).ready(function(){
        $('a#linkHolder').fancybox({
            'frameWidth': 800,
            'frameHeight': 600
        });
        $('a#testClick').click(function(){
            var _email = $('input#email').val();
            $('a#linkHolder').attr('href', '/signup/index/email/' + _email + '/?iframe');
            $('a#linkHolder').click();
        });
    });
//-->
</script>
<form id="testForm">
    <input type="text" id="email" />
</form>
<a href="Javascript:void(0);" id="testClick">test</a> 
<a href="http://maps.google.com/?iframe" id="linkHolder">

JQuery の click イベントを関数内で呼び出すっていうのは使えるケースが色々ある様な気がする。
これだと Flash からも呼び出すことが可能ですね！

・・・・・

[参考サイト]
fancybox
JQuery