uikit에서 진행률 막대와 switcher를 함께 사용하여 각 디스플레이 전환에 대해 진행률 표시 줄을 애니메이션으로 만듭니다.
개요
CSS 프레임워크 UIKit의 컴포넌트 "progress"와 "switcher"를 연계해 보았습니다.
현재 표시 위치에 따라 progressbar가 애니메이션됩니다.
주로, 앙케이트등의 UI에 있어서 유저가 지금 얼마나 응답이 진행되었는지 볼 때 사용할 수 있을까요.
데모는 Plunker에 나와 있습니다.
htps : // pln kr. 코 / 에아 t / 후우 1X 13pWd9 아 G 베아 Bw? p=p레ゔぃえw
소스 코드
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에서 제공하는 스위치는 디스플레이 전환에 대한 콜백이 구현됩니다.
그래서 콜백을 받았을 때, 리스트상의 uk-active의 위치로부터 진행 바의 텍스트와 CSS의 재기록 처리를 실시하고 있습니다.
덧붙여서 JavaScript의 코드의 4행째에 매직 넘버(+1 하고 있는 토코)를 사용하고 있습니다만, 이것은 index()로 반환값이 0 시작이기 때문에・・・어쩔 수 없었던 것이다・・・
참고로
UIKit의 공식 사이트는 아래에,
ht tp // 굉장히 t. 코m/
iOS 앱의 uikit과 이름이 쓰여져 그그래빌리티가 나쁘지만, 굉장히 좋은 CSS 프레임워크이므로 앞으로 더욱 일본어 정보가 늘어나면 기쁩니다.
Reference
이 문제에 관하여(uikit에서 진행률 막대와 switcher를 함께 사용하여 각 디스플레이 전환에 대해 진행률 표시 줄을 애니메이션으로 만듭니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/eskey_mo/items/be20e41c8a6b285fa7bc
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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에서 제공하는 스위치는 디스플레이 전환에 대한 콜백이 구현됩니다.
그래서 콜백을 받았을 때, 리스트상의 uk-active의 위치로부터 진행 바의 텍스트와 CSS의 재기록 처리를 실시하고 있습니다.
덧붙여서 JavaScript의 코드의 4행째에 매직 넘버(+1 하고 있는 토코)를 사용하고 있습니다만, 이것은 index()로 반환값이 0 시작이기 때문에・・・어쩔 수 없었던 것이다・・・
참고로
UIKit의 공식 사이트는 아래에,
ht tp // 굉장히 t. 코m/
iOS 앱의 uikit과 이름이 쓰여져 그그래빌리티가 나쁘지만, 굉장히 좋은 CSS 프레임워크이므로 앞으로 더욱 일본어 정보가 늘어나면 기쁩니다.
Reference
이 문제에 관하여(uikit에서 진행률 막대와 switcher를 함께 사용하여 각 디스플레이 전환에 대해 진행률 표시 줄을 애니메이션으로 만듭니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/eskey_mo/items/be20e41c8a6b285fa7bc
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(uikit에서 진행률 막대와 switcher를 함께 사용하여 각 디스플레이 전환에 대해 진행률 표시 줄을 애니메이션으로 만듭니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/eskey_mo/items/be20e41c8a6b285fa7bc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
