特にNow Loading...であると限りませんが、プログラムは同期という作業が欠かせないわけでして処理の時間が数秒かかってしまう場合があります。Webの世界ではどうしてだかこの数秒が許せないものでして、ちょっと待たされたら周囲にあるいろんなボタンを押してしまうという...ことをやってしまうわけです。
そんな時一定時間処理が終わるまで周囲のUIをブロックして押したりクリックしたりできないようにしてしまうのが、jQuery BlockUI Pluginです。Pluginなのでかなり便利で設定も簡単です。
Sample Demo
http://www.malsup.com/jquery/block/#overview
基本的に日本語な人は以下の説明で結構いろいろできると思います。
ここからソースをダウンロードします。Javascriptは一般的にそうですがダウンロードといってもコピペするだけですのでご注意ください。特にファイルをダウンロードするみたいなことはしない感じです。コピペしたものを適当な場所にファイル保存して、同様にhtml内に呼び込みます。
本家のDemo画面にいろいろとソースがあるので、ここで気に入ったものを使うという方法がありますのでこちらも試してください。http://malsup.com/jquery/block/#demos
そんな時一定時間処理が終わるまで周囲のUIをブロックして押したりクリックしたりできないようにしてしまうのが、jQuery BlockUI Pluginです。Pluginなのでかなり便利で設定も簡単です。
Sample Demo
jQuery BlockUI Plugin (v2)の使い方
英語のサイトもかなり見やすいので英語が読める方はこっちの方が断然わかりやすいです。http://www.malsup.com/jquery/block/#overview
基本的に日本語な人は以下の説明で結構いろいろできると思います。
jQueryの本家を入れる
jQueryライブラリーを入れます。ダウンロードして自分のところのサーバーに設置するのがよろしいかと思いますが、私は面倒なのでGoogleから引っ張ってきています。<head>これでjQueryが使えるようになります。ちなみにバージョンには気をつけてください。たぶん最新のものがいいと思います。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
...
</head>
BlockUI Pluginを入手する
ダウンロードサイト http://malsup.com/jquery/block/#downloadここからソースをダウンロードします。Javascriptは一般的にそうですがダウンロードといってもコピペするだけですのでご注意ください。特にファイルをダウンロードするみたいなことはしない感じです。コピペしたものを適当な場所にファイル保存して、同様にhtml内に呼び込みます。
<head>どこか別のサーバーからhttp://で呼び出しても大丈夫です。単なる文字情報を呼び込んで実行するのは自分のPCのブラウザーだからです。これでプラグインが使えるようになります。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
<script type="text/javascript" src="jquery.blockUI.js"></script>
</script>
...
</head>
Block UIを使ってみる
このBlock UIのプロセスは、- 何らかのイベント発生
- ブロックする
- ブロック中にメッセージを流す
- ブロックを解除する
- 次のページ行く（成功画面とか）
本家のDemo画面にいろいろとソースがあるので、ここで気に入ったものを使うという方法がありますのでこちらも試してください。http://malsup.com/jquery/block/#demos
$(document).ready(function() {これだけでだいぶらしくなる感じです。
$('#demo2').click(function() { //何らかのイベント発生、ここではクリック(1)
$.blockUI({ //ブロックする(2)
message: 'Now Loading', // ここから以下、ブロック中にメッセージを流す (3)
css: {
border: 'none',
padding: '10px',
backgroundColor: '#333',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
},
overlayCSS: {
backgroundColor: '#000',
opacity: 0.6
}
});
$.ajax({ url: 'result.php' }); // 次のページ行く、ここではcomplete画面(5)
setTimeout($.unblockUI, 2000); // 2秒後にブロックを解除する(4)
});
});
