hifiveのUIライブラリの紹介「マグネットコンテナ」
hifiveで提供しているUIライブラリの一つ、マグネットコンテナの使い方を紹介します。
まずはサンプルです。
動作するデモはこちらにあります。DOMがドラッグ可能になっており、他のDOMの近くに持っていくと吸い付くようになっています。さらにくっついた時にハイライトする仕組みです。
必要なライブラリ
マグネットコンテナを実現するにはhifive本体の他に次のライブラリが必要になります。
HTMLの記述
まずHTMLを記述します。今回はdiv要素を並べており、後で色と配置を指定します。
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="magnet-wrapper"> | |
| <div class="sample red"></div> | |
| <div class="sample blue"></div> | |
| <div class="sample green"></div> | |
| <div class="sample yellow"></div> | |
| <div class="sample purple"></div> | |
| <div class="sample gray"></div> | |
| </div> |
色と配置の指定
次にスタイルシートで色と配置を指定します。すべてfloatで、positionもabsoluteになっています。後は各divごとにtop/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
| .magnet-wrapper { | |
| position: relative; | |
| } | |
| .sample { | |
| width: 120px; | |
| height: 120px; | |
| float: left; | |
| cursor: pointer; | |
| position: absolute; | |
| } | |
| .red { | |
| background-color: #F3C0AB; | |
| top: 0; | |
| left: 0; | |
| } | |
| .blue { | |
| background-color: #99CFE5; | |
| top: 200px; | |
| left: 200px; | |
| } | |
| .green { | |
| background-color: #98DE8D; | |
| top: 200px; | |
| left: 400px; | |
| } | |
| .yellow { | |
| background-color: #FFF599; | |
| top: 0px; | |
| left: 400px; | |
| } | |
| .purple { | |
| background-color: #D27EB3; | |
| top: 0px; | |
| left: 200px; | |
| } | |
| .gray { | |
| background-color: #E3E3E3; | |
| top: 200px; | |
| left: 0px; | |
| } |
JavaScriptのコード
では実際のコントローラのコードですが、これはとても簡単です。
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() { | |
| h5.core.controller('.magnet-wrapper', h5.ui.components.MagnetContainer.MagnetController) | |
| }); |
これだけでマグネットコンテナが使えるようになります。 .magnet-wrapper は全体のクラスになります。
細かな動作の指定を行う場合についてはマグネットコンテナ サンプルを参考にしてください。簡易的に実現するのであれば こちらのデモ をご覧ください。
hifive開発者ブログ 
コメントは受け付けていません。