Namespace: ui

h5. ui

hifiveで使用するUI部品を格納するオブジェクト
Source:

Classes

FormController

Namespaces

jqm

Methods

(static) indicator(param, optionopt)

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

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

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


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

// h5.ui.indicator('body'); 非推奨
targetにdocumentwindowまたは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のドキュメント を参照下さい。

Parameters:
Name Type Attributes Description
param Object パラメータオブジェクト
Properties
Name Type Attributes Description
target DOM | jQuery | String インジケータを表示する対象のDOM要素、jQueryオブジェクトまたはセレクタ
message String <optional>
スロバーの右側に表示する文字列 (デフォルト:未指定)
percent Number <optional>
スロバーの中央に表示する数値。0~100で指定する (デフォルト:未指定)
block Boolean <optional>
画面を操作できないようオーバーレイ表示するか (true:する/false:しない) (デフォルト:true)
fadeIn Number <optional>
インジケータをフェードで表示する場合、表示までの時間をミリ秒(ms)で指定する (デフォルト:フェードしない)
fadeOut Number <optional>
インジケータをフェードで非表示にする場合、非表示までの時間をミリ秒(ms)で指定する (デフォルト:しない)
promises Promise | Array.<Promise> <optional>
Promiseオブジェクト (Promiseの状態に合わせて自動でインジケータの非表示を行う)
theme String <optional>
テーマクラス名 (インジケータのにスタイル定義の基点となるクラス名 (デフォルト:'a')
throbber.lines String <optional>
スロバーの線の本数 (デフォルト:12)
throbber.roundTime String <optional>
スロバーの白線が1周するまでの時間(ms) (このオプションはCSS3Animationを未サポートブラウザのみ有効) (デフォルト:1000)
option Object <optional>
第1引数にターゲット(param.target)を指定して、第2引数にオプションオブジェクトを指定できます。ただしこの指定方法は非推奨です。
第2引数のオプションオブジェクトの構造は、パラメータオブジェクトと同様です。
Source:
See:

(static) isInView(element, container) → {Boolean}

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

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

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

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

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

Parameters:
Name Type Description
element String | Element | jQuery 要素
container Object コンテナ
Returns:
要素が可視範囲内にあるかどうか
Type
Boolean
Source:

(static) scrollToTop()

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