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

サマリー

１．jQuery.BlockUIとは
２．使い方
３．画面がready状態になる前に表示させたい場合
４．使用してみた感想

f:id:kojikoji75:20140320225727j:plain
photo credit: Arttu Ekholm via photopin cc

１．jQuery.BlockUIとは

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

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

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

f:id:kojikoji75:20140320223129p:plain

２．使い方

（１）ダウンロード

http://malsup.com/jquery/block/

（２）headでjQueryとblockUIプラグインを読み込み、functionを書く

<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>

※オプション説明

項目	説明
message	メッセージを指定
css	メッセージ部のスタイルを指定
showOverlay	オーバーレイを指定したくない場合false
overlayCSS	オーバーレイ部のスタイルを指定
fadeIn	オーバーレイのfadeIn時間
fadeOut	オーバーレイのfadeOut時間

（３）bodyへ記述

a要素で使用する場合。（リンクをクリックするとNowLoading...）

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

idをつけれるものは何でも可。サブミットボタンの例。（ボタンクリックでNowLoading...）

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

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

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

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