パネルをフェードさせる

デフォルトではパネルは瞬時に表示/消されます。パネルではオプションにエフェクトを設定することができます。エフェクトはYAHOO.widget.Panel()の2番目のオプションで指定します。オプションにeffectを指定し適用するエフェクトと時間を指定します。

適用可能なエフェクトはフェードイン/フェードアウトさせるものになります。サンプル11ではパネルの表示、非表示の際に1秒間でフェード処理が完了するようになっています。フェードの時間はdurationで指定できます。指定できる値は秒数になります。

サンプル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"> 
        <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", {
                    effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:1 },
                });
                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>

パネルが表示されて一定時間経過したら非表示にしたい場合があります。パネルを非表示にするにはhide()メソッドを使います。setTimeout()を使って、指定した時間後にhide()メソッドを呼び出すことで一定時間経過後にパネルを非表示にすることができます(サンプル12)。

サンプル12の実行結果

一時的に非表示になる

サンプル12

<!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"><!--
            var panelObj;
            window.onload = function() {
                panelObj = new YAHOO.widget.Panel("panel1", {
                    effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:1 },
                    width : "420px",
                    height : "auto",
                    close : false,
                    modal : true,
                    underlay : "matte"
                });
                panelObj.render();
                setTimeout("panelObj.hide()", 5000);
            }
        // --></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>