hifiveのUIライブラリ紹介「ArrowBox(その1)」
hifiveが提供している業務システム開発で使えるUIライブラリの紹介です。今回はArrowBoxを紹介します。ArrowBoxは指定したDOMの上下左右、任意の場所に対してツールチップを出すライブラリです。
動作デモはこちらで確認できます。使ってみているところは下の画像を参照してください。
使い方
HTMLはとてもシンプルなものです。ただし、h5arrowboxというIDのDOMを用意しているのが特徴になります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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が特徴です。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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が指定できます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
}); | |
}, |
さらに吹き出しを消すためのイベントも作成します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var controller = { | |
__name: 'PageController', | |
: | |
'.removeArrowBox click': function(context, $el) { | |
// 吹き出し要素の取得 | |
var $arrowbox = $el.parents('.h5arrowbox'); | |
// ArrowBoxインスタンスの取り出し | |
var arrowbox = this._arrowboxController.getArrowBoxFromElement($arrowbox); | |
// 吹き出しの削除 | |
arrowbox.dispose(); | |
} |
このような実装によって、ツールチップが好きな場所に出せるようになります。
動作デモはこちらで確認できます。ヘルプとしてぜひ使ってみてください。
コメントは受け付けていません。