- jQuery BlockUI Plugin (v2)

「jQuery BlockUI Plugin」を使うとAJAX通信時の画面ブロックを簡単に実装できます。

サンプルはこちらです。(別ウィンドウで開きます)。

身長と体重を入力して「計算」ボタンをクリックすると肥満度が表示される、という単純なサンプルですが、AJAX通信時にjQuery BlockUI Pluginを使って、画面のブロックと解除を行なっています。

※サンプルでは、画面ブロック中に1秒間のスリープ処理を入れています。

簡単に使い方をご紹介します。

1.jQueryとjQuery BlockUI Pluginの読み込み

jQueryとjQuery BlockUI Pluginを読み込みます。

<script type="text/javascript" src="jquery.js">
<script type="text/javascript" src="jquery.blockUI.js">

jquery.jsのダウンロードはこちらから。

jQuery BlockUI Pluginのダウンロードはこちらから。

2. 画面のブロック

以下の1行で画面をブロックしてくれます。

$.blockUI();

サンプルでは以下のように、
ブロック中のメッセージとスタイルも設定しています。

$.blockUI({
    message: '<div><img src="/common/image/indicator.gif" style="margin-right:5px;">一生懸命計算してます。</div>',
    css: {
        padding:'25px'
    }
});

3. 画面ブロックの解除

以下の1行で画面ブロックを解除してくれます。

$.unblockUI();

サンプルでは、以下のようにjQueryのajaxメソッドを使って
入力データをPOST送信し、通信完了後に画面ブロックを解除しています。

$.ajax({
    url  : "/bmi",
    type : "post",
    data : $("#example").serialize(), // 入力データをセット
    success : function(responses) {
        $.unblockUI(); // 画面ブロックを解除
        $("#update").html(responses); // 診断結果を表示
    },
    error : function(){
        $.unblockUI(); // 画面ブロックを解除
        alert("エラーが発生しました");
    }
});

このように、jQuery BlockUI Pluginを使うと、
簡単に画面ブロック処理を実装できます。

詳細は配布元サイトをご確認ください。