コンテンツへスキップ

hifiveのUIライブラリの紹介「マグネットコンテナ」

by : 2016/07/22

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>

view raw

contexst.js

hosted with ❤ by GitHub

色と配置の指定

次にスタイルシートで色と配置を指定します。すべて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;
}

view raw

style.css

hosted with ❤ by GitHub

JavaScriptのコード

では実際のコントローラのコードですが、これはとても簡単です。


$(function() {
h5.core.controller('.magnet-wrapper', h5.ui.components.MagnetContainer.MagnetController)
});

view raw

index.js

hosted with ❤ by GitHub

これだけでマグネットコンテナが使えるようになります。 .magnet-wrapper は全体のクラスになります。

細かな動作の指定を行う場合についてはマグネットコンテナ サンプルを参考にしてください。簡易的に実現するのであれば こちらのデモ をご覧ください。

マグネットコンテナ サンプル

From → hifive

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。