表示幅を指定する

シンプルダイアログでは、多くの表示オプションが用意されています。表示オプションはYAHOO.widget.SimpleDialog()の3番目のパラメータに{ オプション名 : 値 }の形式で指定します。設定するオプション名が複数ある場合は,(カンマ)で区切って指定します。まず、シンプルダイアログの表示幅を指定してみましょう。シンプルダイアログの横幅を指定するにはwidth、縦幅を指定するにはheightを使います。サンプル04では横幅を420px、縦幅を200pxに設定しています。指定できる値はスタイルシートで指定できる単位を含むものになります。また、必ず両方指定する必要はなく片方だけ指定しても問題なく動作します。

サンプル04の実行結果

サンプル04

<!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"
                }); 
                dlgObj.setHeader("注意");
                dlgObj.setBody("このページにはプログラマ向けの内容が含まれています"); 
                dlgObj.render(document.body);
            }
        // --></script>
    </head>
    <body>
    <h1>YUIシンプルダイアログサンプル(幅を指定)</h1>
    </body>
</html>

シンプルダイアログが表示される際にブラウザウィンドウの中央に表示させることもできます。この場合はfixedcenterオプションでtrueを指定します。シンプルダイアログを特定の<div>タグ内に表示するように設定している場合でも、ブラウザウィンドウの中央に表示されます(サンプル05)。

サンプル05の実行結果

サンプル05

<!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
                }); 
                dlgObj.setHeader("注意");
                dlgObj.setBody("このページにはプログラマ向けの内容が含まれています"); 
                dlgObj.render(document.body);
            }
        // --></script>
    </head>
    <body>
    <h1>YUIシンプルダイアログサンプル(中央に表示)</h1>
    </body>
</html>