Class 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

インジケータを止めます。
終了後、再利用することはできません。
//#target は、indicator を表示する対象を指定してください。
$("#target").imuiIndicator(); //インジケータを表示します。
// ここになにかロジックを書きます。
$("#target").imuiIndicator("destroy"); //インジケータを止めます。
再描画します。リサイズもされます。
resizePollingTimeに0以上を指定した場合、定期的に実行されるので通常は実行する必要はありません。
//#target は、indicator を表示する対象を指定してください。
$("#target").imuiIndicator("pack");