hifiveのUIライブラリの紹介「ボックス切り替え」
hifiveで提供しているUIライブラリの一つ、ボックス切り替えの使い方を紹介します。
まずは動作しているサンプルです。
このようにDOMをクリックすると、上下左右から新しいDOMがスライドして差し替わります。なお、古いDOMはアニメーションが完了した段階で消去されます。
動いているデモはこちらで確認できます。
必要なライブラリ
ボックス切り替えを行うにはhifive本体の他に以下のライブラリが必要です。
ボックス切り替えの実装
まずベースのJavaScriptは次のようになります。hifiveの基本的なコントローラの仕組みに replaceBoxController オプションが追加されています。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(function() { | |
var outerBoxController = { | |
__name: 'OuterBoxController', | |
replaceBoxController: h5.ui.container.ReplaceBoxController, | |
__meta: { | |
replaceBoxController: { | |
rootElement: '> .replaceBox' | |
}, | |
}, | |
__init: function(context) { | |
}, | |
}; | |
}); | |
h5.core.controller(".outerBox", outerBoxController); | |
}); |
後は任意のイベントなのですが、今回はボックスのクリックイベントを使います。処理の内容ですが、 this.__count は表示上のものになります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'> .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 file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
this.replaceBoxController.replace(element, { | |
completeCallback: function(old, current) { | |
// 完了時のイベント | |
// oldに古いDOM情報が入ります。 | |
}, | |
transition: transition | |
}); |
アニメーションをうまく使えばシングルページアプリケーションやスマートフォン/タブレット向けのWebアプリケーションでも使えるでしょう。より詳しいデモはボックス切り替えにありますのでご覧ください。
Trackbacks & Pingbacks
コメントは受け付けていません。