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

スポンサーリンク

サマリー

1.jQuery.BlockUIとは
2.使い方
3.画面がready状態になる前に表示させたい場合
4.使用してみた感想

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

1.jQuery.BlockUIとは

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

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

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

f:id:kojikoji75:20140320223129p:plain

2.使い方

(1)ダウンロード
jQuery BlockUI Plugin

(2)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時間

(3)bodyへ記述

a要素で使用する場合。(リンクをクリックするとNowLoading…)

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

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

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

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

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

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

$(document).ready(function() {

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

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

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

$.unblockUI();

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

4.使用してみた感想

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

デモは下記。

jQuery BlockUI Plugin

Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)

Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)

タイトルとURLをコピーしました