w2utils.lock

HTML要素をロックします。 戻り値はundefinedです。

lock(box, message, [showSpinner])

box: HTML要素, jQueryオブジェクト

ロックする要素を指定します。

message: string

表示メッセージ。オプションです。

showSpinner: boolean

スピナーを表示するかどうかを指定します。オプションです。

lock(box, options)

box: HTML要素, jQueryオブジェクト

ロックする要素を指定します。

options: object

オプション。

説明

第1引数のboxは、通常はロックされるdiv(絶対配置が必要です。)です。 第2引数のmessageは、表示するメッセージです。 このパラメータがnullや空文字の場合、メッセージを表示しません。 第3引数のshowSpinnerは、スピナーを表示するかどうかを指定します。

第2引数には以下のような構造を持ったオプションを定義することができます。

options = {
    msg     : '',       // 表示メッセージ。
    spinner : false,    // スピナーを表示するかどうか。
    opacity :           // ロックするdivの透明度。
}

divを暗くせずにロックするには

w2utils.lock(div, { spinner: true, opacity : 1 });

divをロックしてスピナーを表示するには

w2utils.lock(div, '', true);

このメソッドはGrid、Sidebar、Layout、Popupで呼び出され、コンテンツをロックします。

デモ

要素をロックしています。
このメソッドを単独で使用する場合には、要素に対してposition指定が必要です。 positionを指定しない場合、画面全体がロックされます。
第1引数にはjQueryのオブジェクトと、セレクタで指定することができるようです。 スピナーを使う場合、ある程度要素の高さが必要です。 要素の高さが足りない場合、要素からはみ出したり、上側にずれて表示されます。

JavaScript

w2utils.lock($('#demo1'));  // jQuery
w2utils.lock('#demo2', 'ロックしています。', true); // セレクタ指定
w2utils.lock('#demo3', { spinner: true, opacity: .6});

CSS

#demo1,
#demo2,
#demo3 {
  position: relative;
  height: 160px;
  margin-bottom: 8px;
}

HTML

<div id="demo1">通常ロック</div>
<div id="demo2">スピナー有り</div>
<div id="demo3">オプションをオブジェクトで指定</div>