スポンサードリンク

Yahoo! User Interface Library - SimpleDialog

YUI SimpleDialogとは

Dialogの拡張で、javascriptのalertのような簡単なDialogを表示するためのクラスです。

詳しくはhttp://developer.yahoo.com/yui/container/simpledialog/のオリジナルを読まれるのがよいと思います。

SimpleDialogを使う前準備

必要なのは8つのファイルです。もちろんインストールは済ませておく必要があります。

<script type="text/javascript" src="your install path/yahoo-min.js"></script>
<script type="text/javascript" src="your install path/dom-min.js"></script>
<script type="text/javascript" src="your install path/event-min.js"></script>
<script type="text/javascript" src="your install path/animation-min.js"></script>
<script type="text/javascript" src="your install path/dragdrop-min.js"></script>
<script type="text/javascript" src="your install path/container-min.js"></script>
<script type="text/javascript" src="your install path/connection-min.js"></script>
<link rel="stylesheet" type="text/css" href="your install pathcontainer.css" />

ダイアログ

icon

Dialogにはない設定項目にicon があります。ここでは、SimpleDialogに初めから用意されているiconを見てみます。

<div id="sdialog1"></div>

<script type="text/javascript">
var sdialog1 = new YAHOO.widget.SimpleDialog("sdialog1", {
    icon: YAHOO.widget.SimpleDialog.ICON_BLOCK
});
sdialog1.setHeader('シンプルダイアログ');
sdialog1.setBody(YAHOO.widget.SimpleDialog.ICON_WARN + 'の画像を使用');
sdialog1.render();

var changeIcon = function (e, o) {
    var iconfile = document.forms["f1"].icon.value;
    o.setBody(iconfile + 'の画像を使用');
    o.cfg.setProperty("icon", iconfile);
    o.render();
}
YAHOO.util.Event.addListener("changeicon", "click", changeIcon, sdialog1);
</script>

IE6ではなぜか画像が表示されない模様。(yui-0.12)

ボタン

ボタンの設定は、親クラスのDialogと同じですので、詳しくはそちらを参照してください。

var sdialog2 = new YAHOO.widget.SimpleDialog("sdialog2", {
    icon: YAHOO.widget.SimpleDialog.ICON_HELP,
    modal: true,
    fixedcenter: true,
    draggable: false,
    visible: false
});

var handleYes = function () {
    this.hide();
}

var handleNo = function () {
    this.hide();
}

sdialog2.cfg.queueProperty("buttons", [
    {text: "はい", handler:handleYes},
    {text: "いいえ", handler:handleNo}
]);

sdialog2.setHeader("2択");
sdialog2.render();