hifiveのUIライブラリの紹介「ボックス切り替え」
hifiveで提供しているUIライブラリの一つ、ボックス切り替えの使い方を紹介します。
まずは動作しているサンプルです。
このようにDOMをクリックすると、上下左右から新しいDOMがスライドして差し替わります。なお、古いDOMはアニメーションが完了した段階で消去されます。
動いているデモはこちらで確認できます。
必要なライブラリ
ボックス切り替えを行うにはhifive本体の他に以下のライブラリが必要です。
ボックス切り替えの実装
まずベースのJavaScriptは次のようになります。hifiveの基本的なコントローラの仕組みに replaceBoxController オプションが追加されています。
| $(function() { | |
| var outerBoxController = { | |
| __name: 'OuterBoxController', | |
| replaceBoxController: h5.ui.container.ReplaceBoxController, | |
| __meta: { | |
| replaceBoxController: { | |
| rootElement: '> .replaceBox' | |
| }, | |
| }, | |
| __init: function(context) { | |
| }, | |
| }; | |
| }); | |
| h5.core.controller(".outerBox", outerBoxController); | |
| }); |
後は任意のイベントなのですが、今回はボックスのクリックイベントを使います。処理の内容ですが、 this.__count は表示上のものになります。
| '> .replaceBox click': function() { | |
| // 新しいHTMLを生成 | |
| this.__count += 1; | |
| var count = this.__count; | |
| var element = $('<div>'+count+'</div>'); | |
| // アニメーションの仕方を取得 | |
| var input = this.$find('select')[0]; | |
| var transition = input.options[input.selectedIndex].value; | |
| // 処理の実行 | |
| this.replaceBoxController.replace(element, {transition: transition}); | |
| }, |
これでボックス切り替えが実行できます。指定できるアニメーションは以下のパターンがあります。それぞれどういったアニメーションをするかはデモで確認してみてください。
- slideLeft
- slideRight
- slideUp
- slideDown
- pushLeft
- pushRight
- pushUp
- pushDown
- openLeft
- openRight
- openUp
- openDown
- fade
なお、アニメーション完了時のイベントを取りたい場合は次のように書きます。
| this.replaceBoxController.replace(element, { | |
| completeCallback: function(old, current) { | |
| // 完了時のイベント | |
| // oldに古いDOM情報が入ります。 | |
| }, | |
| transition: transition | |
| }); |
アニメーションをうまく使えばシングルページアプリケーションやスマートフォン/タブレット向けのWebアプリケーションでも使えるでしょう。より詳しいデモはボックス切り替えにありますのでご覧ください。
hifive – HTML5企業Webシステムのための開発プラットフォーム
Trackbacks & Pingbacks
コメントは受け付けていません。