hifiveのUIライブラリの紹介「ボックス切り替え」

hifiveで提供しているUIライブラリの一つ、ボックス切り替えの使い方を紹介します。

まずは動作しているサンプルです。

このようにDOMをクリックすると、上下左右から新しいDOMがスライドして差し替わります。なお、古いDOMはアニメーションが完了した段階で消去されます。

動いているデモはこちらで確認できます。

必要なライブラリ

ボックス切り替えを行うにはhifive本体の他に以下のライブラリが必要です。

• animate.js
• replaceBox.js
• jquery.easing.1.3.js

ボックス切り替えの実装

まずベースのJavaScriptは次のようになります。hifiveの基本的なコントローラの仕組みに replaceBoxController オプションが追加されています。

後は任意のイベントなのですが、今回はボックスのクリックイベントを使います。処理の内容ですが、 this.__count は表示上のものになります。

これでボックス切り替えが実行できます。指定できるアニメーションは以下のパターンがあります。それぞれどういったアニメーションをするかはデモで確認してみてください。

• slideLeft
• slideRight
• slideUp
• slideDown
• pushLeft
• pushRight
• pushUp
• pushDown
• openLeft
• openRight
• openUp
• openDown
• fade

なお、アニメーション完了時のイベントを取りたい場合は次のように書きます。

アニメーションをうまく使えばシングルページアプリケーションやスマートフォン/タブレット向けのWebアプリケーションでも使えるでしょう。より詳しいデモはボックス切り替えにありますのでご覧ください。

ボックス切り替え

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