これはホントに使える！「お待ちください（Now Loading..)」画面を半透明レイヤーでいろどるjQuery.BlockUI.jsの使い方いろいろ

１．jQuery.BlockUIとは

Webアプリにおいて、時間のかかる処理中や重い画面を開くときなどに「お待ちください」「Please Wait…」「Now Loading…」などと表示させ、ユーザーが画面を触われない）状態にすることは、大切なUI設計の一つである。

これを簡単に実装する方法の一つにjQuery.BlockUI.jsというjQueryプラグインがある。

これを使うと簡単に画面全体を半透明のレイヤーでブロックすることができる。

２．使い方

（１）ダウンロード

jQuery BlockUI Plugin

malsup.com

<script type="text/javascript" src="/Scripts/jquery.js"></script>
<script type="text/javascript" src="/Scripts/jquery.blockUI.js"></script>
<script type="text/javascript">
$(function() {
  $('#test').click(function() {
    $.blockUI({
      message: 'Now Loading',
      css: {
        border: 'none',
        padding: '10px',
        backgroundColor: '#333',
        opacity: .5,
        color: '#fff'
      },
      overlayCSS: {
        backgroundColor: '#000',
        opacity: 0.6
      }
    });
    setTimeout($.unblockUI, 10000);
  });
}); 
</script>

<a href="#" id="test"></a>

<input type="button" id="test" value="click here!">

３．画面がready状態になる前に表示させたい場合

上記の例はリンククリック時にNowLoading画面が表示される例で、入門用サンプルとしてわかりやすいのでよく説明に用いられるが、実はあまり現実的ではない。
なぜなら、リンクをクリックするということは、次の画面に遷移することがほとんどであり、
時間を要する処理は、遷移先画面で行われることも多いから。
例えば遷移先画面で多くのテーブルデータを読み込んだりしている場合、画面表示までNowLoadingを表示させておきたい場合などがある。

このような場合は、jQueryを少しでもかじっていたらわかることだが、headに書いている下記

$(document).ready(function() {

の部分は、画面を読み込んでしまってから（ready状態になってから）実行される部分。

この部分を削って、遷移先画面のbody内の冒頭に書いてやると、遷移先画面の読み込み完了前からNowLoadingが表示されることになる。

この場合は最後にブロックを解除する必要がある。body最下部で

$.unblockUI();

とブロックを解除してやるとよい。

４．使用してみた感想

ユーザの使用感を満足させるのに、クリック時になんらかの反応を見せるのは必須。特にフェードイン/フェードアウトする透明レイヤーは上質に見える上に、連続クリックを防止するという機能も備えていて、個人的には今後はずせないものとなりそう。

デモは下記。

jQuery BlockUI Plugin

malsup.com