hifiveのUIライブラリ紹介「ArrowBox（その1）」

by moongift : 2016/10/25

hifiveが提供している業務システム開発で使えるUIライブラリの紹介です。今回はArrowBoxを紹介します。ArrowBoxは指定したDOMの上下左右、任意の場所に対してツールチップを出すライブラリです。

動作デモはこちらで確認できます。使ってみているところは下の画像を参照してください。

使い方

HTMLはとてもシンプルなものです。ただし、h5arrowboxというIDのDOMを用意しているのが特徴になります。

	<div class="sampleDiv sampleDiv1">
	<button class="sample-btn" data-direction="up">上</button>
	<button class="sample-btn" data-direction="right">右</button>
	<button class="sample-btn" data-direction="down">下</button>
	<button class="sample-btn" data-direction="left">左</button>
	</div>
	<script type="text/ejs" id="h5arrowbox">
	<div class="h5arrowbox"></div>
	</script>
	<script type="text/ejs" id="message">
	<div><p>吹き出しサンプル</p><p>吹き出しサンプルです</p><button class="removeArrowBox" style="float:right">OK</button></div>
	</script>

view raw

index.js

hosted with ❤ by GitHub

そして、JavaScriptのコントローラは次のようになります。view.registerが特徴です。

	(function() {
	var controller = {
	__name: 'PageController',

	_arrowboxController: h5.ui.components.arrowbox.ArrowBoxController,
	__ready: function() {
	},

	};
	h5.core.expose(controller);
	})();

	$(function() {
	h5.core.controller('.sampleDiv', PageController);
	});

view raw

index.js

hosted with ❤ by GitHub

そして、ボタンをクリックした時のイベントを作成します。directionはHTMLのdata要素で指定した、up/downまたはright/leftが指定できます。

	var controller = {
	__name: 'PageController',
	:
	'.sample-btn click': function(context, $el) {
	var direction = $el.data('direction');
	var $target = $el.parent();
	var arrowbox = this._arrowboxController.create(this.view.get('message'));
	arrowbox.show({
	target: $target,
	direction: direction
	});
	},

view raw

index.js

hosted with ❤ by GitHub

さらに吹き出しを消すためのイベントも作成します。

	var controller = {
	__name: 'PageController',
	:
	'.removeArrowBox click': function(context, $el) {
	// 吹き出し要素の取得
	var $arrowbox = $el.parents('.h5arrowbox');
	// ArrowBoxインスタンスの取り出し
	var arrowbox = this._arrowboxController.getArrowBoxFromElement($arrowbox);
	// 吹き出しの削除
	arrowbox.dispose();
	}

view raw

gistfile1.txt

hosted with ❤ by GitHub

このような実装によって、ツールチップが好きな場所に出せるようになります。

動作デモはこちらで確認できます。ヘルプとしてぜひ使ってみてください。

From → hifive

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