JavaScript & jQuery/jQuery
[jQuery] 퍼센트 게이지를 나타내는 Progress Bar
사악미소
2018. 10. 25. 17:38
참고 : https://codepen.io/AndreiaLopes/pen/ogrKBZ
■ 퍼센트 게이지(프로그래스 바) 나타내기
jQuery UI 중 퍼센트 게이지를 나타낼때 유용한 progressbar가 존재한다.
그렇지만 단순히 막대만을 넣어서 사용하는게 아니라.
해당 progressbar 내에 텍스트를 삽입하기 위한 코드를 정리해 본다.
# 소스코드
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: jQuery 프로그래스 바 ::</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<style type="text/css"> // CSS의 position 속성을 이용하여 두개의 DIV 레이아웃을 겹친다.
.u.i-progressbar { position:relative; }
.progress-label {
position:absolute;
left:50%;
top:8px;
font-weight:bold;
margin-left:-40px;
}
</style>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/JavaScript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
var barProgress = jQuery(".progressbar");
// value 값의 숫자를 입력함으로서 내용을 채울 수 있다.
barProgress.eq(0).progressbar({value:25});
barProgress.eq(0).find(".ui-progressbar-value").css({"background":"#CC66CC"});
barProgress.eq(1).progressbar({value:75});
barProgress.eq(1).find(".ui-progressbar-value").css({"background":"#FFCC66"});
barProgress.eq(2).progressbar({value:50});
barProgress.eq(2).find(".ui-progressbar-value").css({"background":"#DDDDDDD"});
});
</script>
</head>
<body>
■ 퍼센트 나타내기
<hr/>
<div class="progressbar"><div class="progress-label">25%</div></div>
<br/>
<div class="progressbar"><div class="progress-label">75%</div></div>
<br/>
<div class="progressbar"><div class="progress-label">50%</div></div>
</body>
</html> |
# 출력결과
