Skip to content

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

by : 2017/02/27

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

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

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

使い方

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

そして、JavaScriptのコントローラは次のようになります。view.registerが特徴です。そして、 this.__arrowClassを追加してあります。このクラスはツールチップの独自のクラス名としておきます。このクラス名があるかどうかで、ツールチップが表示済みかどうかを判定します。

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

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

さらに吹き出しを消すためのイベントも作成します。

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


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

banner_02

From → hifive

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

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