ボタンを表示する

基本的にダイアログには最低でも１つのボタンが表示されています。シンプルダイアログでは、ボタンの名前や数は自由に設定することができます。ダイアログだからボタンは１つ、２つしか指定できないという制限はありません。ボタンの設定はシンプルダイアログのコンフィグで設定を行います。queueProperty()を使ってボタンの設定を行います。queueProperty()の最初のパラメータは"buttons"で、2番目のパラメータがボタンの情報を設定した配列になります。ボタンを設定する配列は以下の形式になります。

[ { text : ボタンに表示する文字, handler : クリック時に実行する処理／関数 }]

ボタン1つにつき、配列の1要素になります。サンプル11は最もシンプルなものでOKボタンが1つだけ存在するシンプルダイアログです。OKボタンがクリックされるとcloseDialog関数が呼び出されます。関数内ではhide()メソッドによりシンプルダイアログが表示されなくなります(表示されなくなるだけでオブジェクトとして存在し、show()メソッドで最表示することができます)。

サンプル11の実行結果

サンプル11

<!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"><!--
            window.onload = function() {
                var dlgObj = new YAHOO.widget.SimpleDialog("dlg", {
                    width : "420px",
                    height : "200px",
                    fixedcenter : true,
                    draggable : false,
                    modal : true,
                    close: false
                }); 
                var dlgButton = [ { text : "OK", handler : closeDialog } ]; 
                dlgObj.cfg.queueProperty("buttons", dlgButton);
                dlgObj.setHeader("注意");
                dlgObj.setBody("このページにはプログラマ向けの内容が含まれています");
                dlgObj.cfg.setProperty("icon",YAHOO.widget.SimpleDialog.ICON_WARN);
                dlgObj.render(document.body);
            }
            function closeDialog(){
                this.hide();
            }
        // --></script>
    </head>
    <body>
    <h1>YUIシンプルダイアログサンプル(ボタン)</h1>
    </body>
</html>