コンテンツへスキップ

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

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

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


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

banner_02

From → hifive

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

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