【ハウツー】ゼロからはじめるYahoo! UI Library - SimpleDialog編 (11) ダイアログをフェードさせる | パソコン

お知らせ: 「マイポ」からのポイント交換を再開いたしました。(5月9日); メール会員100万人突破記念「春の読者プレゼント」結果発表は5月30日です。; マイナビベアがミクシィで部屋を作ったよ。ぜひ見てね！; 一緒に「マイナビ」で働きませんか。採用情報はこちらから。; 旅行券3万円、時計、ビジネスバッグなどが当たる！さらに応募者全員に50マイポもプレゼント

その先を伝える総合情報サイト
マイナビニュース

パソコン

急上昇ワード

[

]

【ハウツー】

ゼロからはじめるYahoo! UI Library - SimpleDialog編

11 ダイアログをフェードさせる

古籏一浩　 [2008/02/13]

印刷

先頭
前へ
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- ／11

デフォルトではシンプルダイアログは瞬時に表示/消されます。シンプルダイアログではオプションにエフェクトを設定することができます。エフェクトはYAHOO.widget.SimpleDialog()の3番目のオプションで指定します。オプションにeffectを指定し、適用するエフェクトと時間を指定します。適用可能なエフェクトはフェードイン/フェードアウトさせるものになります。サンプル15ではダイアログの表示、非表示の際に1秒間でフェード処理が完了するようになっています。フェードの時間はdurationで指定できます。指定できる値は秒数になります。

サンプル15の実行結果

サンプル15

<!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/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 dlgObj = new YAHOO.widget.SimpleDialog("dlg", {
                    effect : { effect:YAHOO.widget.ContainerEffect.FADE, duration : 1 }, 
                    width : "320px",
                    height : "150px",
                    fixedcenter : true,
                    draggable : false,
                    modal : true,
                    close: false
                }); 
                var dlgButton = [
                    { text : "保存", handler : saveButton, isDefault:true },
                    { text : "保存しない", handler : noSaveButton },
                    { text : "キャンセル", handler : cancelButton }
                 ]; 
                dlgObj.cfg.queueProperty("buttons", dlgButton);
                dlgObj.setHeader("確認");
                dlgObj.setBody("このまま続けますか？");
                dlgObj.cfg.setProperty("icon",YAHOO.widget.SimpleDialog.ICON_HELP);
                dlgObj.render(document.body);
            }
            function saveButton(){
                alert("保存します");
                this.hide();
            }
            function noSaveButton(){
                alert("保存しません");
                this.hide();
            }
            function cancelButton(){
                alert("キャンセルされました");
                this.hide();
            }
        // --></script>
    </head>
    <body>
    <h1>YUIシンプルダイアログサンプル(エフェクト)</h1>
    </body>
</html>

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

サンプル16の実行結果

サンプル16

<!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"><!--
            var dlgObj;
            window.onload = function() {
                dlgObj = new YAHOO.widget.SimpleDialog("dlg"); 
                dlgObj.setBody("このページにはプログラマ向けの内容が含まれています"); 
                dlgObj.render(document.body);
                setTimeout("dlgObj.hide()", 5000);
            }
        // --></script>
    </head>
    <body>
    <h1>YUIシンプルダイアログサンプル(5秒で消す)</h1>
    </body>
</html>

Yahoo UI Libraryの中でもシンプルダイアログは機能の割に手軽に使える便利なライブラリです。Ajaxを利用するコンテンツでは便利に使えるのではないかと思います。