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(); | |
| } |
このような実装によって、ツールチップが好きな場所に出せるようになります。
動作デモはこちらで確認できます。ヘルプとしてぜひ使ってみてください。
hifive – HTML5企業Webシステムのための開発プラットフォーム
コメントは受け付けていません。