使用したjQueryプラグイン vol.3

こんにちは。
職人見習いの高嶋です。

以前案件で利用したjQueryプラグインをメジャーマイナー関わらず報告していきます。

○cvi_busy_lib.js

ダウンロード：busy.js (javascript loading indicators)

jQueryプラグインではないですが、cvi_busy_lib.jsのライブラリの紹介です。

通信中などによく使用される、ローディング画面を実現させるライブラリです。
上記URLからzipファイルをダウンロードしてドキュメントルートに置きます。

HTMLのHEADERタグ内に以下の記述をします。
そして、例えば非同期通信時などの際に、以下のように記述します。

// ビジー状態呼び出し
var lval = getBusyOverlay(
 document.body,
 {color:'black', opacity:0.5, text:'loading',style:'text-decoration:blink;font-weight:bold;font-size:12px;color:white'},
 {color:'#fff',size:128, type:'o'}
);

var data = $.ajax({
 url: '/api/hoge',
 type: 'POST',
 data: {'json': json},
 complete: function(res, status){
  // ビジー状態解除
  lval.remove();

  ## 通信成功後の処理
 }
});

欠点としては、ローディング中を表示して画面をロックしている時点で非同期通信ではなく同期通信を希望しているのにAjax関数でいうところの『async: false』つまり同期通信的な書き方をすると、ブラウザロックと相まって正常に動作しません。

※この記事は、なかの人（piro556）が書いています。