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
は全体のクラスになります。
細かな動作の指定を行う場合についてはマグネットコンテナ サンプルを参考にしてください。簡易的に実現するのであれば こちらのデモ をご覧ください。
コメントは受け付けていません。