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

by moongift : 2016/08/19

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);
	});

view raw

gistfile1.js

hosted with ❤ by GitHub

後は任意のイベントなのですが、今回はボックスのクリックイベントを使います。処理の内容ですが、 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});
	},

view raw

replacebox.js

hosted with ❤ by GitHub

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

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

 this.replaceBoxController.replace(element, {
   completeCallback: function(old, current) {
     // 完了時のイベント
     // oldに古いDOM情報が入ります。
   },
   transition: transition
 });

view raw

replace.js

hosted with ❤ by GitHub

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

From → hifive

One Comment

コメントは受け付けていません。

最近の投稿