コンテンツへスキップ

hifiveのUIライブラリ紹介「ArrowBox(その1)」

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

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


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

 

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

banner_02

From → hifive

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

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