hifiveのUIライブラリの紹介「マグネットコンテナ」
hifiveで提供しているUIライブラリの一つ、マグネットコンテナの使い方を紹介します。
まずはサンプルです。
動作するデモはこちらにあります。DOMがドラッグ可能になっており、他のDOMの近くに持っていくと吸い付くようになっています。さらにくっついた時にハイライトする仕組みです。
必要なライブラリ
マグネットコンテナを実現するにはhifive本体の他に次のライブラリが必要になります。
HTMLの記述
まずHTMLを記述します。今回はdiv要素を並べており、後で色と配置を指定します。
| <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で配置を指定しています。
| .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のコード
では実際のコントローラのコードですが、これはとても簡単です。
| $(function() { | |
| h5.core.controller('.magnet-wrapper', h5.ui.components.MagnetContainer.MagnetController) | |
| }); |
これだけでマグネットコンテナが使えるようになります。 .magnet-wrapper は全体のクラスになります。
細かな動作の指定を行う場合についてはマグネットコンテナ サンプルを参考にしてください。簡易的に実現するのであれば こちらのデモ をご覧ください。
コメントは受け付けていません。