jQuery UI – dialog のダイアログの中身を、ajaxで取ってこれるようにしたものを作りました。
jQuery UI – dialogのラッパーなちょろっとしたスクリプトですが。

• jQuery UI
• サンプル1 – テーマ：flick
• サンプル2 – テーマ：ui-lightness
• jquery.ajaxDialog.js
• まとめてzip

The end of Thickbox

ダイアログを開くとき、頼まれる側としては、「Thickboxで。」って言われて頼まれることが非常に多いです。ところが、Thickboxだと、あんまり拡張性がなくて、コールバックを渡したりすることができません。（開いたときに何か実行させたり、閉じる瞬間に何か実行させたりすることができないということ）普通にダイアログ開くだけの時はいいのですが、要件が複雑になると、Thickboxでは対応できないこともあり、自分で 似たようなもの を作ってみたりもしました。最近、Thickboxのページを見たところ、もう開発終わってるので他の使ってくれとのメッセージが出ていたので、他のを試してみることにしました。とりあえず、jQuery UI の dialog を試しました。

なぜjQuery UI dialogを使おうとしたのかというと、jQuery UIの出来がすごい良いと感じたからです。dialogは使ったことが無かったのですが、別の機会でjQuery UIの sortable を使うことがありました。sortableは、その名の通り、要素をドラッグ＆ドロップで並べ替えることができるスクリプトなのですが、ドロップした瞬間、つまんだ瞬間にcallbackを送ることができたり、つまんでいる間にどこそこにclassを付けたりなど、あーこれは必要そうだと思われる機能がほとんど実装されていました。自分でThickboxクローンを作った時も、こういった機能が必要だから作ったのですが、あーこれ使っておけばよかったとか思いました。jQuery UIと銘打ってるだけあって、そこらへんに転がっている同系統のものよりかははるかに作り込まれていると思います。

$().ajaxDialog

ですが、jQuery UIを使ってみたところ、これは、ページ内のコンテンツをダイアログとして表示する機能のみを有していました。大体、通常のサイトで使う時は、今までwindow.openをして開いていたようなものをちょろっと開くことが多いです。そんなこんなで、$.ajaxでページ内容を取ってきてjQuery UI dialogにするのが、この$().ajaxDialogです。

使い方は以下のような形です。optionsには、jQuery UI の dialogに設定したいものを指定します。

$(function(){

    $('a.dialogOpen1').ajaxDialog({
        bgiframe: true,
        modal: true,
        buttons: {
            'close': function(){
                $(this).dialog('close');
            }
        }
    });

});

<a href="test01.html" class="dialogOpen1" title="test hoge test hoge1">Dialog1 - 01</a>

これで、Thickboxみたいに、クリックしたらダイアログが開く形になります。ajaxDialogに渡すオプションの値は、ほぼそのまま、jQuery UI – dialogに渡されます。指定できるオプションの詳細については　jQuery UI – dialog　のページを参照のほど。

jQuery UI のいいところは、前述したとおり、ダイアログ開いたらどうするとか、閉じるときどうするとかいうコールバックが色々用意されているところが非常に大きいのですが、jQuery UIのテーマが手軽に使えるという所も利点です。jQuery UI – ThemeRoller　のページにて、すでに用意されているテーマを選んだり、それらをちょろっとカスタマイズすることができます。ThemeRollerのページでテーマを選んだ後、jQuery UIのダウンロードを行うと、そのテーマのCSSが一緒に入っていますので、そのCSSを読み込むだけで、気軽に色々なデザインが使えます。

まぁしかし、このままだとloading中の表示を出せないし、画像だっけを出すようなこともできませんので、その部分のみ追加で作るなりしてバージョンアップしていくか、また別のものを試してみようかと考えています。

参考

• jQuery UI
• jQuery UI – dialog
• jQuery UI – ThemeRoller
• Thickbox