hifiveのUIライブラリ紹介「ArrowBox(その1)」
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> |
そして、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); | |
}); |
そして、ボタンをクリックした時のイベントを作成します。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 | |
}); | |
}, |
さらに吹き出しを消すためのイベントも作成します。
var controller = { | |
__name: 'PageController', | |
: | |
'.removeArrowBox click': function(context, $el) { | |
// 吹き出し要素の取得 | |
var $arrowbox = $el.parents('.h5arrowbox'); | |
// ArrowBoxインスタンスの取り出し | |
var arrowbox = this._arrowboxController.getArrowBoxFromElement($arrowbox); | |
// 吹き出しの削除 | |
arrowbox.dispose(); | |
} |
このような実装によって、ツールチップが好きな場所に出せるようになります。
動作デモはこちらで確認できます。ヘルプとしてぜひ使ってみてください。
コメントは受け付けていません。