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

by moongift : 2017/02/27

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

今回はクリックした場所にツールチップを出す方法を紹介します。（前回の記事も合わせてご覧ください。）

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

使い方

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

	<div class="sampleDiv">
	<h2>この中をクリックするとツールチップが出ます</h2>
	</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が特徴です。そして、 this.__arrowClassを追加してあります。このクラスはツールチップの独自のクラス名としておきます。このクラス名があるかどうかで、ツールチップが表示済みかどうかを判定します。

	(function() {
	var controller = {
	__name: 'PageController',
	__arrowClass: 'position-set',
	_arrowboxController: h5.ui.components.arrowbox.ArrowBoxController,
	__ready: function() {
	},
	}
	});

view raw index.js hosted with ❤ by GitHub

そして、ボタンをクリックした時のイベントを作成します。この時の処理は2つあり、まずすでに表示しているツールチップがあれば、それを消します。

	'.sampleDiv click': function(context, $el) {
	// 既にposition-setクラスを持つ吹き出しがあったら削除する
	var $arrowbox = this.$find('.position-set');
	// 吹き出しの要素からArrowBoxインスタンスを取得
	var preArrowbox = this._arrowboxController.getArrowBoxFromElement($arrowbox);
	// 吹き出しをdispose
	preArrowbox && preArrowbox.dispose();
	:
	},

view raw index.js hosted with ❤ by GitHub

そして後半でツールチップを表示します。この時、ポジションを指定することで表示場所が指定できます。ポジションは context.event.pageX/context.event.pageYで取得できます。

	'.sampleDiv click': function(context, $el) {
	:
	// 第2引数でクラスを追加する
	var arrowbox = this._arrowboxController.create(this.view.get('message'), {
	cls: 'position-set'
	});
	var x = context.event.pageX;
	var y = context.event.pageY;
	arrowbox.show({
	position: {
	left: x,
	top: y
	}
	});
	},

view raw gistfile1.txt 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

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