hifiveのUIライブラリ紹介「ArrowBox（その1）」

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

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

使い方

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

そして、JavaScriptのコントローラは次のようになります。view.registerが特徴です。

そして、ボタンをクリックした時のイベントを作成します。directionはHTMLのdata要素で指定した、up/downまたはright/leftが指定できます。

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

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

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

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