jQuery UI Dialogの使い方の基本-初期化とメソッド呼び出し(jQuery UI 1.5.2)
jQuery UI Dialogの導入法と使い方のさわり(jQuery UI 1.5.2) - 文殊堂の続き
まず、UI Dialogを読み込んだときにjQueryオブジェクトで使えるようになるメソッドはdialogメソッドだけです。
UI Dialog絡みの操作は全部dialogメソッドで行います。
具体的に出来ることはDialogWidgetの初期化と各種メソッド呼び出しです。
初期化
初期化はdialogメソッドの引数にオプションをオブジェクトとしてを渡すことで行う
HTMLは下記のものを使用するとします。
<html> <head> <link rel="stylesheet" href="./flora/flora.dialog.css" type="text/css"> <script type="text/javascript" src="./js/jquery-1.2.6.js"></script> <script type="text/javascript" src="./js/ui.core.js"></script> <script type="text/javascript" src="./js/ui.dialog.js"></script> </head> <body class="flora"> <div id="some-content"> ほげほげ<br> ふがふが<br> ぴよぴよ </div> </body> </html>
例えばこんなオプションを指定すると
$('#some-content').dialog({ title:'タイトル', width:400, buttons:{ '左ボタン':function(){}, '右ボタン':function(){} } });
タイトルバーに「タイトル」と入り、幅が400px、「左ボタン」「右ボタン」という2つのボタンがついたDialogを表示できます。
詳細は概ねDialog Widget | jQuery UI API Documentationのドキュメントに書いてあるとおりです。
ドキュメントに書かれていないオプションもありますが、この話はまた今度。
オプションのデフォルト値
オプションにはデフォルト値というものが存在します。
例えばpositionの場合、'left'を指定するとDialogが左に寄り
$('#some-content').dialog({ title:'タイトル', position:'left' });
$('#some-content').dialog({ title:'タイトル', position:'center' });
$('#some-content').dialog({ title:'タイトル' });
無引数での初期化の場合は全てデフォルト値を使用
以下のように無引数で初期化した場合は全てデフォルト値を使用することになります。
$('#some-content').dialog();
続く…