デフォルトではシンプルダイアログは瞬時に表示/消されます。シンプルダイアログではオプションにエフェクトを設定することができます。エフェクトはYAHOO.widget.SimpleDialog()の3番目のオプションで指定します。オプションにeffectを指定し、適用するエフェクトと時間を指定します。適用可能なエフェクトはフェードイン/フェードアウトさせるものになります。サンプル15ではダイアログの表示、非表示の際に1秒間でフェード処理が完了するようになっています。フェードの時間はdurationで指定できます。指定できる値は秒数になります。
 |
サンプル15の実行結果 |
サンプル15
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>YUIシンプルダイアログサンプル</title>
<link rel="stylesheet" type="text/css" href="css/container.css">
<script type="text/javascript" src="js/yahoo-dom-event.js"></script>
<script type="text/javascript" src="js/animation.js"></script>
<script type="text/javascript" src="js/dragdrop.js"></script>
<script type="text/javascript" src="js/container.js"></script>
<script type="text/javascript"><!--
window.onload = function() {
var dlgObj = new YAHOO.widget.SimpleDialog("dlg", {
effect : { effect:YAHOO.widget.ContainerEffect.FADE, duration : 1 },
width : "320px",
height : "150px",
fixedcenter : true,
draggable : false,
modal : true,
close: false
});
var dlgButton = [
{ text : "保存", handler : saveButton, isDefault:true },
{ text : "保存しない", handler : noSaveButton },
{ text : "キャンセル", handler : cancelButton }
];
dlgObj.cfg.queueProperty("buttons", dlgButton);
dlgObj.setHeader("確認");
dlgObj.setBody("このまま続けますか？");
dlgObj.cfg.setProperty("icon",YAHOO.widget.SimpleDialog.ICON_HELP);
dlgObj.render(document.body);
}
function saveButton(){
alert("保存します");
this.hide();
}
function noSaveButton(){
alert("保存しません");
this.hide();
}
function cancelButton(){
alert("キャンセルされました");
this.hide();
}
// --></script>
</head>
<body>
<h1>YUIシンプルダイアログサンプル(エフェクト)</h1>
</body>
</html>
シンプルダイアログが表示されて、一定時間経過したら非表示にしたい場合があります。シンプルダイアログを非表示にするにはhide()メソッドを使います。setTimeout()を使って、指定した時間後にhide()メソッドを呼び出すことで一定時間経過後にシンプルダイアログを非表示にすることができます(サンプル16)。
 |
サンプル16の実行結果 |
サンプル16
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>YUIシンプルダイアログサンプル</title>
<link rel="stylesheet" type="text/css" href="css/container.css">
<script type="text/javascript" src="js/yahoo-dom-event.js"></script>
<script type="text/javascript" src="js/dragdrop.js"></script>
<script type="text/javascript" src="js/container.js"></script>
<script type="text/javascript"><!--
var dlgObj;
window.onload = function() {
dlgObj = new YAHOO.widget.SimpleDialog("dlg");
dlgObj.setBody("このページにはプログラマ向けの内容が含まれています");
dlgObj.render(document.body);
setTimeout("dlgObj.hide()", 5000);
}
// --></script>
</head>
<body>
<h1>YUIシンプルダイアログサンプル(5秒で消す)</h1>
</body>
</html>
Yahoo UI Libraryの中でもシンプルダイアログは機能の割に手軽に使える便利なライブラリです。Ajaxを利用するコンテンツでは便利に使えるのではないかと思います。