share facebook facebook twitter menu hatena pocket slack

2011.11.04 FRI

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

櫛田 草平

WRITTEN BY 櫛田 草平

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

以前案件で利用した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)が書いています。

櫛田 草平

櫛田 草平

cloudpackで運用、保守、構築、夜間対応を担当しており、日々様々な課題に対応していますのでこの経験を記事にしていけたらと思います。 櫛田 草平

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。