개발자의 끄적끄적

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

개발/javascript & jquery

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

효벨 2019. 10. 16. 09:15
728x90
반응형

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

 

 

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

 

 

 

 

# 출력결과

 

유용한게 쓰일꺼 같아서 소장용으로 퍼왔습니다!!!

 

다들 참고하세요!!

 

 

 ## 출처 : http://magic.wickedmiso.com/92

 

 

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

참고 : https://codepen.io/AndreiaLopes/pen/ogrKBZ ■ 퍼센트 게이지(프로그래스 바) 나타내기 jQuery UI 중 퍼센트 게이지를 나타낼때 유용한 progressbar가 존재한다. 그렇지만 단순히 막대만을 넣어서 사용하..

magic.wickedmiso.com

 

반응형

'개발 > javascript & jquery' 카테고리의 다른 글

[jquery] .remove() 특정 html 지우기  (0) 2019.10.18
[javascript] javascript ckeditor 파일업로드  (0) 2019.10.17
[javascript] javascript countup.js 카운트업  (0) 2019.10.15
[javascript] jQuery.extend(), 두개 이상의 객체를 합치기(Merge)  (0) 2019.10.14
[javascript] javascript sort 정렬 함수  (0) 2019.10.14
'개발/javascript & jquery' Related Articles more
Comments