概要
CSSフレームワークUIKitのコンポーネント「progress」と「switcher」を連携してみました。
現在の表示場所によってprogressbarがアニメーションします。
主に、アンケート等のUIにおいてユーザーが今どれくらい回答が進んだかみるときに使えそうですかね。
デモはPlunkerに挙げてあります。
https://plnkr.co/edit/FiulXGe13pWd9AGBeABw?p=preview
ソースコード
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.25.0/css/uikit.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.25.0/css/components/dotnav.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.25.0/css/components/progress.min.css">
</head>
<body>
<div class="uk-panel uk-panel-box uk-panel-box-secondary">
<h1>Progress bar Animation</h1>
<div id="progressbar" class="uk-progress uk-progress-success">
<div class="uk-progress-bar" style="width: 0%;">0%</div>
</div>
<ul id="content" class="uk-switcher">
<li class="uk-active"><h1>1</h1></li>
<li><h1>2</h1></li>
<li><h1>3</h1></li>
<li><h1>4</h1></li>
<li><h1>5</h1></li>
</ul>
<ul class="uk-dotnav uk-flex-center small" data-uk-switcher="{connect:'#content'}">
<li class="uk-active"><a href="">...</a></li>
<li><a href="">...</a></li>
<li><a href="">...</a></li>
<li><a href="">...</a></li>
<li><a href="">...</a></li>
</ul>
</div>
<script src="script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.25.0/js/uikit.min.js"></script>
</body>
</html>
JavasScript
var bar = $("#progressbar").find(".uk-progress-bar");
var list = $("#content").find("li").length;
$('[data-uk-switcher]').on('show.uk.switcher', function(event, area){
var itemActive = $("#content").find("li.uk-active").index() + 1;
var percent = Math.floor(itemActive / list * 100);
bar.css("width", percent+"%").text(percent+"%");
});
ざっくり説明しますと、UIKitが提供しているswitcherは表示の切り替わりに対するコールバックが実装されています。
ですのでコールバックを受け取った際に、リスト上のuk-activeの位置からプログレスバーのテキストとCSSの書き換え処理を行っています。
ちなみにJavaScriptのコードの4行目にマジックナンバー(+1してるとこ)を使用していますが、これはindex()で返却値が0始まりのため・・・仕方なかったのだ・・・
参考までに
UIKitの公式サイトは以下に、
http://getuikit.com/
iOSアプリのuikitと名前がかぶっておりググラビリティが悪いですが、すごく良いCSSフレームワークなんでこれからもっともっと日本語の情報が増えるとうれしいです。