ｊQueryUIのDialogウィジェット
とても使いよかったので簡単な使い方をメモっておく
jQueryを入手する
http://jquery.comからjQuery本体、http://ui.jquery.com/download_builder/からjQueryUIのファイルをそれぞれ入手する。
UIの方はチェックボックスが並んでるとこの真ん中あたりにある「Dialogs」にチェックを入れて左側のDownloadボタンを押せばOK。
チェックさえ入れれば勝手に依存するライブラリにもチェックが入るとか相当親切なつくりでこちらにも結構感動。
今回はjquery1.2.6、jquery-ui1.6rc2を使用しました。
書く
必要なファイルが揃ったらコードを書く。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="jquery-ui-1.6rc2.min.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { $("#dialog").dialog({ autoOpen: false, width: 400, height: 200, title: "ダイアログ", draggable: true, resizable: true, buttons: { "OK": function() { alert("OK!"); $(this).dialog("close"); }, "キャンセル": function() { alert("ないわー"); $(this).dialog("close"); } } }); $("#show_dialog").bind("click", function() { $("#dialog").dialog("open"); }); }); //]]> </script> </head> <body> <button id="show_dialog" type="button">おす</button> <div id="dialog"> だいあろーぐ！ </div> </body> </html>
こんな感じ。
これであとは「おす」ボタンを押せばダイアログ…らしきものが出る。
テーマ
しかし見た目がおかしい。どうやらスタイルが設定されてない様子。
ということでスタイルシートをおもむろに書く･･･のではなく。
http://ui.jquery.com/themeroller からテーマファイル一式をダウンロード。
これもまた凄い。好きに色を弄ってプレビューして気に入った配色になったら右上のDownloadボタン一つでそのテーマが自動生成されてzipで降ってくるという代物。
あとは解凍して適用すればOK。
完了
たったこれだけでダイアログが出せてしまう。なにせコード量がやたら少ない。
実質
$("#dialog").dialog({...});
の一行だけでダイアログUIを導入できるのはほんとにすばらしい。
長くなってしまったのでコードの説明は次の記事で。
