(X)HTMLタグの設定

それでは最も簡単な例から始めましょう。サンプル01(ページ末尾)は、単純にシンプルダイアログを表示するだけのスクリプトです。この状態でもダイアログとしての機能は果たしています。タイトルバーをドラッグして移動することができ、クローズボタンをクリックするとダイアログを閉じることができます。シンプルダイアログ機能を使うにはあらかじめ必要となるスタイルシートとスクリプトファイルを読み込ませておく必要があります。まず、スタイルシートファイルであるcontainer.cssを<link>タグを使って読み込ませます。

<link rel="stylesheet" type="text/css" href="css/container.css">

次に3つのスクリプトファイルを<script>タグを使って読み込ませます。一番最後に解説しているサンプルのようにフェード処理を行う場合はanimation.jsも読み込ませる必要があります。

<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>

アニメーション処理(フェード処理)を行う場合は以下の1行を追加します。

<script type="text/javascript" src="js/animation.js"></script>

サンプル01ではページが読み込まれた後にシンプルダイアログを表示させています。ページが読み込まれた時に処理を行うにはwindow.onload = function() { ～ }の～の中に処理を記述します。表示するシンプルダイアログの生成はnew YAHOO.widget.SimpleDialog("dlg")とします。パラメータにはダイアログを示すdlgの文字を指定します。これによりシンプルダイアログオブジェクトが作成されるので一度変数に入れておきます。サンプル01ではdlgObj変数にシンプルダイアログオブジェクトの参照が入っています。シンプルダイアログ内に表示する文字はsetBody()メソッドで指定します。表示したい文字をsetBody()のパラメータとして指定します。

new YAHOO.widget.SimpleDialog()は内部的にシンプルダイアログオブジェクトが生成されるだけでページ上には表示されません。ページ上にシンプルダイアログを表示するにはシンプルダイアログオブジェクトのrender()メソッドを使う必要があります。render()メソッドのパラメータには表示先のオブジェクトを指定します。render(document.body)とするとシンプルダイアログはブラウザウィンドウ内に表示されます。

サンプル01の実行結果

サンプル01

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