Namespace: ui

指定された要素に対して、インジケータ(メッセージ・画面ブロック・進捗)の表示や非表示を行うためのオブジェクトを取得します。

第1引数にインジケータの設定を記述したパラメータオブジェクトを指定してください。

第1引数にインジケータのターゲットを指定する方法は非推奨です。

h5.ui.indicator({
	target: 'body'
});

// h5.ui.indicator('body'); 非推奨

targetにdocument、windowまたはbodyを指定しかつ、blockオプションがtrueの場合、「スクリーンロック」として動作します。
上記以外のDOM要素を指定した場合は、指定した要素上にインジケータを表示します。

スクリーンロックとは、コンテンツ領域(スクロールしないと見えない領域も全て含めた領域)全体にオーバーレイを、表示領域(画面に見えている領域)中央にメッセージが表示し、画面を操作できないようにすることです。スマートフォン等タッチ操作に対応する端末の場合、スクロール操作も禁止します。

スクリーンロック中の制限事項

• Android 4.xにてorientationchangeイベント発生直後にインジケータのDOM要素の書き換えを行うと画面の再描画が起こらなくなってしまうため、orientationchangeイベント発生から1秒間percent()/massage()での画面の書き換えをブロックします。
  orientationchagenイベント発生から1秒以内にpercent()/message()で値を設定した場合、最後に設定された値が画面に反映されます。
• WindowsPhone 7ではscrollイベントを抑止できないため、インジケータ背後の要素がスクロールしてしまいます。ただし、クリック等その他のイベントはキャンセルされます。

使用例

スクリーンロックとして表示する

var indicator = h5.ui.indicator({
	target: document
}).show();

li要素にスロバー(くるくる回るアイコン)を表示してブロックを表示しない場合

var indicator = h5.ui.indicator({
	target: 'li',
	block: false
}).show();

パラメータにPromiseオブジェクトを指定して、done()/fail()の実行と同時にインジケータを除去する
resolve() または reject() が実行されると、画面からインジケータを除去します。

var df = $.Deferred();
var indicator = h5.ui.indicator({
	target: document,
	promises: df.promise()
}).show();

setTimeout(function() {
	df.resolve(); // ここでインジケータが除去される
}, 2000);

パラメータに複数のPromiseオブジェクトを指定して、done()/fail()の実行と同時にインジケータを除去する
Promiseオブジェクトを複数指定すると、全てのPromiseオブジェクトでresolve()が実行されるか、またはいずれかのPromiseオブジェクトでfail()が実行されるタイミングでインジケータを画面から除去します。

var df = $.Deferred();
var df2 = $.Deferred();
var indicator = h5.ui.indicator({
	target: document,
	promises: [df.promise(), df2.promise()]
}).show();

setTimeout(function() {
	df.resolve();
}, 2000);

setTimeout(function() {
	df.resolve(); // ここでインジケータが除去される
}, 4000);

コントローラのindicator()の仕様については、Controller.indicatorのドキュメント を参照下さい。

要素が可視範囲内、または指定した親要素内にあるかどうかを返します。

第2引数を省略した場合、要素がウィンドウ内に見えているかどうかを返します。 elementが他のDOM要素によって隠れていても、範囲内にあればtrueを返します。

第2引数を指定した場合、elementがcontainerの表示範囲内で見えているかどうかを返します。 containerがウィンドウ内に見えているかどうかは関係ありません。 elementがcontainerの子孫要素で無ければundefinedを返します。

ブラウザで拡大/縮小を行っていた場合、僅かな誤差のために結果が異なる場合があります。

いずれの場合も、要素が非表示の場合の動作は保障されません。

ブラウザのトップにスクロールします。