コンテンツへスキップ

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

by : 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

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

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

view raw
replace.js
hosted with ❤ by GitHub

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

ボックス切り替え


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

banner_02

From → hifive

%d人のブロガーが「いいね」をつけました。