読者です 読者をやめる 読者になる 読者になる

TechNote

とあるエンジニアのただのメモ

これはホントに使える!「お待ちください(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)ダウンロード

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

(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.使用してみた感想

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


デモは下記。
http://malsup.com/jquery/block/#demosjQuery BlockUI Plugin



あわせて読みたい

jQueryでオシャレかつ機能的なフォーム画面を実装 formly.js - TechNotejQueryでオシャレかつ機能的なフォーム画面を実装 formly.js - TechNote

社内システムだったら必ずフォームのPost送信は多用するし、Webサイトであっても入力画面が存在するところには必ずフォームは必要となる。そんなとき、簡単にオシャ...

jQueryでスライダー機能を実装 - 横幅いっぱいのスライダーFullWideSlider - TechNotejQueryでスライダー機能を実装 - 横幅いっぱいのスライダーFullWideSlider - TechNote

以前のエントリーjQueryでスライダー機能&#...

BootStrap 向けのdatepickerによるカレンダー実装は簡単便利 だけどieには不向きか - TechNoteBootStrap 向けのdatepickerによるカレンダー実装は簡単便利 だけどieには不向きか - TechNote

BootStrap向けのdatepickerによるカレンダー実装が簡単かつ便利だったので使用方法をメモ。1.ダウンロード現在はちゃんと日本語対応版も出ているよう...


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

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