jQuery.imui.imuiIndicator

Constructor

imuiIndicator ( [Object options] ) Static

ロード中であることをアイコンを使って表示します。
ロード中のHTMLElementを操作できないようにロックができます。
ロード中にHTMLElementのサイズが変化しても、追従してリサイズします。

Parameters

options : Object: OptionalDefault: {}; オプション
options.text : String: OptionalDefault: Please wait...; ロード中に表示するテキスト
options.backgroundClass : String: OptionalDefault: imui-indicator-bg; 主に背景のスタイルを指定したクラス名。生成される外側のdiv
options.textClass : String: OptionalDefault: imui-indicator-fg; 主に前景のスタイルを指定したクラス名。生成される内側のdiv
options.imgSrcPath : String: OptionalDefault: ui/images/loadinfo.net.gif; 画像ファイルのソースパス
アイコンを表示させたくない場合は空文字("")を指定する
options.opacity : Number: OptionalDefault: 75; 透明度。0(透明)～100(不透明)で指定
options.resizePollingTime : Number: OptionalDefault: 50; HTMLエレメントのリサイズを監視するタイマーの実行頻度(ms)。0で無効化
値を大きくすれば負荷は低くなるが、リサイズが間に合わずに誤操作される可能性が大きくなる
options.zIndex : Number: OptionalDefault: 9999999; インジケータの z-index
表示対象の要素にz-indexが指定されている場合は、表示対象のz-indexに1を足した値になる
options.animationTime : Number: OptionalDefault: 0; customアニメーション実行間隔(ms)。0で無効化
options.onBeforeCustomAnimation : Function: OptionalDefault: $.noop; customアニメーション開始前イベント
options.onCustomAnimation : Function: OptionalDefault: $.noop; customアニメーションファンクション
javascriptアニメーションを自由に定義できる
animationTimeに0を指定された場合はこの関数は呼ばれない
options.onAfterCustomAnimation : Function: OptionalDefault: $.noop; customアニメーション終了後イベント

//インジケータを表示する例。すべてのパラメータは省略可能
$("#target").imuiIndicator();

//パラメータを指定する例
$("#target").imuiIndicator({"text":"読み込み中です",
                            "opacity":25,
                            "onBeforeCustomAnimation":function(){
                              alert("カスタムアニメーションを開始します");
                            }});

//onCustomAnimationで表示する文字列の高さと色を変更する例
$('#target').imuiIndicator({
  //画像は表示せず、文字のみの表示にします
  imgSrcPath: "",
  //100ミリ秒毎にアニメーションを実行します
  animationTime: 100,
  //引数から表示される文字列を取得し、1文字ずつspanタグで囲みます。アニメーションで高さを変更するためpositionをrelativeにします
  onBeforeCustomAnimation:function(_textNode){
    var ary = _textNode.text().split("");
    _textNode.empty();
    for(var idx=0;idx<ary.length;idx++){
      $("<span></span>").text(ary[idx]).appendTo(_textNode).css("position", "relative");
    }
  },
  //1文字ずつspanにエフェクトを加えます。文字の位置と文字の色をランダムに変更します
  onCustomAnimation:function(_textNode){
    _textNode.find("span").each(function () {
      $(this).css({
        "top": Math.random() * 4 - 2 + "px",
        "left": Math.random() * 2 - 1 + "px",
        "color": "#" + (Math.ceil(Math.random() * 12) + 3).toString(16) +
                       (Math.ceil(Math.random() * 12) + 3).toString(16) +
                       (Math.ceil(Math.random() * 12) + 3).toString(16)
      });
    });
  }
});

Static members

Static MethodsDefined By

destroy ( ) Static jQuery.imui.imuiIndicator

インジケータを止めます。
終了後、再利用することはできません。

//#target は、indicator を表示する対象を指定してください。
$("#target").imuiIndicator(); //インジケータを表示します。
// ここになにかロジックを書きます。
$("#target").imuiIndicator("destroy"); //インジケータを止めます。

pack ( ) Static jQuery.imui.imuiIndicator

再描画します。リサイズもされます。
resizePollingTimeに0以上を指定した場合、定期的に実行されるので通常は実行する必要はありません。

//#target は、indicator を表示する対象を指定してください。
$("#target").imuiIndicator("pack");