busy.jsを使ってみる

programming javascript

簡単にローディング画面を作れるbusy.jsライブラリを使ってみた。楽だ。とっても楽だ。
まずhttp://www.netzgesta.de/busy/からzipをダウンロード、解凍してドキュメントルートに置く。次に以下のHTMLを保存してアクセス。

<html>
    <head>
        <script src="busy/cvi_busy_lib.js"></script>
        <script>
function $(tid){ return document.getElementById(tid); }
function init()
{
    var ctrl = null;
    function switcher()
    {
        if (ctrl == null) {
            ctrl = getBusyOverlay("viewport", {opacity:0.5, color:"black", text:"loading"});
        }else{
            ctrl.remove();
            ctrl = null;
        }
    }
    $("trigger").addEventListener("click", switcher, true);
}
        </script>
    </head>
    <body onLoad="init();">
        <div id="main" style="margin-left:auto;margin-right:auto;width:800px;">
            <div id="container">
                <form onSubmit="return false;">
                    <input type="text"/><br/>
                    <textarea></textarea><br/>
                    <input type="submit" id="trigger"/>
                </form>
            </div>
        </div>
    </body>
</html>

画面を読み込んだ直後の状態

送信すると