Loggerでは、いくつかの表示オプションが用意されています。オプションはYAHOO.widget.LogReader()の2番目のパラメータに{ オプション名 : 値 }の形式で指定します。設定するオプション名が複数ある場合は,(カンマ)で区切って指定します。通常ログウィンドウはドラッグすることができますが、draggable: falseを指定するとドラッグすることができなくなります(サンプル03)。

サンプル03の実行結果

サンプル03

<!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/logger.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/logger.js"></script> 
        <script type="text/javascript"><!--
            window.onload = function() {
                new YAHOO.widget.LogReader(null, { draggable: false });
                YAHOO.log("ドラッグできません");
            }
        // --></script>
    </head>
    <body>
    <h1>YUIロガーサンプル（ドラッグ不可）</h1>
    </body>
</html>

ログウィンドウの横幅と縦幅も指定できます。横幅はwidth、縦幅はheightで指定できます。また、ログウィンドウの下部にある領域を表示するかどうかはfooterEnabledで指定できます。trueを指定すれば表示され、falseを指定すれば表示されなくなります(サンプル04)。

サンプル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/logger.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/logger.js"></script> 
        <script type="text/javascript"><!--
            window.onload = function() {
                new YAHOO.widget.LogReader(null, {
                    draggable: true,
                    footerEnabled : true,
                    width : "20em",
                    height : "30em"
                });
                YAHOO.log("サンプルテキスト");
            }
        // --></script>
    </head>
    <body>
    <h1>YUIロガーサンプル（幅を指定）</h1>
    </body>
</html>