fogLoader - jQuery Plugin Demo</h1> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script src="jquery.themeswitcher.min.js"></script> <script src="jquery.fogLoader.1.0.0.js"></script> </head> <body> <div id="loader"></div> <h1>fogLoaderのデモでーす。</h1> <p>2つのタイプのデモをご覧ください。デモを終了する場合は「ESC」キーを押してください。</p> <div> <p>メッセージ</p> <button id=class="ui-button" onclick="runLoader('spelling')">デモ①</button> </div> <div> <p>プログレッシバー</p> <button id=class="ui-button" onclick="runLoader('progressbar')">デモ②</button> </div> <script> $("#switcher").themeswitcher({ imgpath: "images/", loadTheme: "UI Lightness" }); var _interval; var _prog = 1; var auto = true; function runLoader(type){ switch (type){ case 'spelling': auto = true; $('#loader').fogLoader({ animated: true, spell: true, message: 'ろーど中' }); break; case 'progressbar': auto = false; $('#loader').fogLoader({ style: 'progressbar' }); _interval = setInterval(function() { $('#loader').fogLoader('updateProgress', {val: _prog}); _prog++; if($('#loader').fogLoader('progressValue') >= 100){ $('#loader').fogLoader('close'); clearInterval(_interval); _prog = 1; }}, 50); break; } } </script> </body> </html>