インジケータに表示/非表示判定。hifiveの便利なUI機能を紹介します

hifiveはMVCのフレームワークであって、他のフレームワークのようにがちがちなUI機能は提供していません。つまりBootstrapなり、Zurb Foundation、jQuery Mobileなどを自由に選んで利用が可能です。

とは言え、業務系でよくありそうなUIを手軽に実装できる機能は提供しています。今回は h5.ui の3つの機能を紹介します。

インジケータ

まずはインジケータ表示です。詳細はhifiveレシピ：処理中のユーザーの誤操作を防止しようを参照してください。

フォームの送信やAjax処理を行う際に誤操作、二重操作を防止するためにインジケータを表示したいと考える時はよくあると思います。

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

このように書くとドキュメント全体にインジケータを表示します。

インジケータではpromiseが指定できます。オプションがpromisesになっている通り、複数渡せます。そして指定したプロミス全体がresolveまたはrejectになるとインジケータが消える仕組みです。これによりAjaxをはじめとする非同期処理の完了をもってインジケータを消すのが簡単に実現できます。

表示、非表示の確認

isInViewというメソッドを使います。以下の例を見てください。

Pタグで囲まれたDOMごとに表示されているか、非表示かを判定しています。

$.each($("p"), function(i, ele) {
  console.log(i+"番目の要素", h5.ui.isInView(ele));
});

最初の二段落目までは表示されているのでtrue、その後はウィンドウ外なのでfalseが返ってきています。実際、マウスオーバーすると表示されているかどうかが確認できます。

ブラウザで拡大、縮小を行っている場合などは誤差が生じることがあるため厳密には結果が異なる場合があります。画像や動画の読み込みをはじめとするコンテンツの遅延読み込みを行う場合には表示されているか否かを判定することで表示を高速化できます。

トップに戻る

縦に長いページの場合、ページ最下部にトップに戻るためのリンクを設置することがあるかと思います。その際には一番上にアンカータグを配置しますが、アンカータグで戻ると #top といったハッシュが追加されてしまいます。

h5.ui.scrollToTop();

で戻るようにすれば、アンカータグは不要でページの最上部まで一気に戻れます。

いかがでしたか。小さな機能ですが、どれも何度も繰り返し必要になる機能だと思います。より高機能でユーザビリティに優れたWebアプリケーションを開発するためにもぜひ活用してください。

なお、今回のデモはGitHubのリポジトリにアップロードしてあります。こちらも合わせてご覧ください（/ui.html）。

hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive