[jQuery] 퍼센트 게이지를 나타내는 Progress Bar[jQuery] 퍼센트 게이지를 나타내는 Progress Bar

Posted at 2018. 10. 25. 17:38 | Posted in JavaScript & jQuery/jQuery
반응형




참고 : 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> 





# 출력결과





반응형
저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] 원을 그리며 카운트 세는 타이머 애니메이션  (0) 2018.11.02
[jQuery] YouTube 영상 제어  (0) 2018.10.26
[jQuery] jQuery Ajax 전송  (0) 2018.09.28
[jQuery] data( ) 메서드를 통한 값 읽고. 쓰기  (0) 2018.09.17
[jQuery] jQuery 셀렉터 정리  (0) 2018.09.10
//

티스토리툴바