パネルを表示する

それでは、最も簡単な例から始めましょう。サンプル01は単純にパネルを表示するだけのスクリプトです。この状態でも、パネルとして問題なく使用することができます。タイトルバーをドラッグして移動することができますし、クローズボタンをクリックするとダイアログを閉じることもできます。

パネル機能を使うには、あらかじめ必要となるスタイルシートとスクリプトファイルを読み込ませておく必要があります。まず、スタイルシートファイルであるcontainer.cssを<link>タグを使って読み込ませます。

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

次に4つのスクリプトファイルを<script>タグを使って読み込ませます。

<script type="text/javascript" src="js/yahoo-dom-event.js"></script>
<script type="text/javascript" src="js/animation.js"></script>
<script type="text/javascript" src="js/dragdrop.js"></script>
<script type="text/javascript" src="js/container.js"></script>

サンプル01ではページが読み込まれた後にパネルを表示させています。ページが読み込まれたら処理を行うにはwindow.onload = function() { ～ }の～の中に処理を記述します。表示するパネルの生成は、表示するパネルの領域を<div>タグで指定しておく必要があります。一般的なパネルの構成は以下のようになります。

<div id="パネルID">
    <div>パネルヘッダー</div>
    <div>パネル内容(本文)</div>
    <div>フッター</div>
</div>

パネルヘッダーはパネルをドラッグするタイトルバーとは異なる領域です。パネルウィンドウ内でのヘッダーを意味しています。これはフッターも同様です。パネルのヘッダーとフッターはパネル機能においては必須ではありません。必要がない場合には記述する必要はありません。

HTMLでタグが用意できたらスクリプトではnew YAHOO.widget.Panel("パネルID")としてパネルオブジェクトを生成します。パラメータにはHTMLで用意したパネルの<div>タグのIDを指定します。サンプル01ではpanelObj変数にパネルオブジェクトの参照を入れています。 パネル内に表示する文字はスクリプトでも設定できますが、あらかじめHTMLタグ内で指定しておく方が簡単です。

new YAHOO.widget.Panel()は内部的にパネルオブジェクトが生成されるだけでページ上には表示されません。ページ上にパネルを表示するにはパネルオブジェクトのrender()メソッドを使う必要があります。render()メソッドのパラメータには表示先のオブジェクトを指定します。render(document.body)とするとパネルはブラウザウィンドウ内に表示されます。パラメータを省略した場合には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"> 
        <link rel="stylesheet" type="text/css" href="css/main.css"> 
        <script type="text/javascript" src="js/yahoo-dom-event.js"></script> 
        <script type="text/javascript" src="js/animation.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 panelObj = new YAHOO.widget.Panel("panel1");
                panelObj.render();
            }
        // --></script>
    </head>
    <body>
    <h1>YUIパネルサンプル(基本)</h1>
    <div id="panel1"> 
        <div class="pHeader">■お知らせ</div>
        <div class="pBody">ライブラリが新しいバージョンになりました。<br>
        ダウンロードは以下のURLから。<br>
        <a href="http://www.openspc2.org/">http://www.openspc2.org/</a>
        </div> 
        <div class="pFooter">最終更新日 : 2007/7/21</div> 
    </div>
    </body>
</html>