티스토리 뷰
javascript 클래스와 jquery prototype 클래스
javascript 클래스와 jquery 클래스(jquery Chaning prototype)을 사용하여
js Class 로는 부트스트랩의 프로그레스 핸들러를
jquery Class 로는 애니메이션 텍스트 핸들러를 만들어 보면서 oop를 비교하고
나름?.. 유용한 핸들러를 만들어 보았다.
javascript 클래스 : ProgressClass
public으로 클래스이름과 바의 최소 너비와 값을 설정하고 지정된 생성자를 실행한다.
부트스트랩의 프로그레스바와 수치를 움직이며, 하단에 기술될 제이쿼리 클래스와 별개로 독립적으로 실행할때에는
$(this.tgClass).AnimateText({num: $num, prevValueEnable:true, unit: "%"}); 부분을 주석처리하고
//this.tgClass.innerHTML = $num+"%"; 으로 주석 처리된 부분을 해제하여 사용한다.
/************************************************************************
*
* @ProgressClass "2016.10.26. 허정진";
*
*************************************************************************/
var ProgressClass = function($tgID){
//private
var name = "ProgressClass";
//public
this.name = name;
this.minWidth = 3;
this.minInt = 0;
this.tgID = $tgID;
this.tgClass;
//constructor
this.constructor.classLength++;
this.constructor();
}
ProgressClass.prototype = (function(){
return{
constructor: function(){
if( ! this.tgID ){
throw new Error( "["+this.name+"] : 전달된 인자가 없습니다." );
return false;
}
this.tgClass = document.getElementById( this.tgID ).getElementsByClassName('progress-bar')[0];
},
init : function(){
this.tgClass.setAttribute("aria-valuenow", 0);
this.tgClass.style.minWidth = this.minWidth + "em";
this.tgClass.style.width = "0%";
this.tgClass.innerHTML = "0%";
},
setValue : function( $num ){
if( typeof $num == "undefined" ) throw new Error( "["+this.name+"] : setValue 전달된 인자가 없습니다." );
this.tgClass.setAttribute("aria-valuenow", $num);
this.tgClass.style.width = $num+"%";
//this.tgClass.innerHTML = $num+"%";
$(this.tgClass).AnimateText({num: $num, prevValueEnable:true, unit: "%"});
}
}
})();
클래스 사용법은
var p = new ProgressClass("progress_1");
p.init();
var randNum = Math.floor( Math.random() * 100 );
p.setValue( randNum );
정도로 사용.
jquery 클래스 : AnimateText
제이쿼리 클래스는 obj로 미리 지정된 값들을 기본으로 사용하며, 주석에 표기된 옵션을 조건으로 동작한다.
(function($){
$.fn.AnimateText = function(options){
var ver = "2016.10.26. 허정진";
var obj = {
num : 100, //기본값
duration : 2000, //시간
easing : "swing", // 움직이는 형태 : swing, easeOutBounce, easeOutExpo
unit : "", //단위
prevValueEnable : false, //엘리먼트에 표시된 수치에서 표현될지, 0에서 시작할지 옵션
useFixedValue : false //애니메이션이 끝나고 이 값으로 고정합니다.
};
$.extend(obj, options);
var tg = $(this);
var div_id = tg.prop('id') || tg.attr('id');
var prevNum = 0;
if( obj.prevValueEnable == true ){
prevNum = parseInt( tg.text(), 10);
}
$({someValue: prevNum}).stop().animate({someValue: obj.num}, {
duration : obj.duration,
easing : obj.easing,
step : function() { // called on every step
// Update the element's text with rounded-up value:
tg.text( Math.round(this.someValue) + obj.unit );
},
complete:function(){
var num = Number(obj.num);
var reg = /^[-|+]?\d+$/; //is_integer? (정수인지 음수부호를 포함하여 검사)
if( reg.test(num) == false ) num = num.toFixed(2);
if( !obj.useFixedValue ){
tg.text( num + obj.unit );
}else{
tg.text( obj.useFixedValue );
}
}
});//end. animate
} //AnimateText (jquery prototype)
})(jQuery); //enc. closer
클래스 사용은
$("#ani_num").AnimateText({num: randNum, prevValueEnable:true, useFixedValue: 100});
정도로 사용.
prevValueEnable이 true 이면 엘리먼트에 표기된 값에서 수치를 움직이고, false일 경우 0에서 시작한다.
useFixedValue가 정의되어 있으면 애니메이션을 끝내고 항상 100으로 표기한다.
unit 은 단위이며, easing은 주석참조.
결과 보기
전체 코드 보기
<!DOCTYPE html>
<html lang='ko'>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="description" content="serpiko's HTML5 Template ver 1.00" />
<meta name="author" content="serpiko@hanmail.net ( http://serpiko.tistory.com )" />
<title>Document</title>
<!-- css -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<style>
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body{padding:10px;}
.progress{width:200px;}
</style>
</head>
<body>
<div class="progress" id='progress_1'>
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%;min-width: 2em;" data-toggle="tooltip" data-placement="bottom" title="ip address, percent">
45%
</div>
</div>
<span id='ani_num'>20</span>
<!-- script -->
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="wrap">
</div>
<script>
$(document).ready(function(){
//////////////////////////////
(function($){
$.fn.AnimateText = function(options){
var ver = "2016.10.26. 허정진";
var obj = {
num : 100, //기본값
duration : 2000, //시간
easing : "swing", // 움직이는 형태 : swing, easeOutBounce, easeOutExpo
unit : "", //단위
prevValueEnable : false, //엘리먼트에 표시된 수치에서 표현될지, 0에서 시작할지 옵션
useFixedValue : false //애니메이션이 끝나고 이 값으로 고정합니다.
};
$.extend(obj, options);
var tg = $(this);
var div_id = tg.prop('id') || tg.attr('id');
var prevNum = 0;
if( obj.prevValueEnable == true ){
prevNum = parseInt( tg.text(), 10);
}
$({someValue: prevNum}).stop().animate({someValue: obj.num}, {
duration : obj.duration,
easing : obj.easing,
step : function() { // called on every step
// Update the element's text with rounded-up value:
tg.text( Math.round(this.someValue) + obj.unit );
},
complete:function(){
var num = Number(obj.num);
var reg = /^[-|+]?\d+$/; //is_integer? (정수인지 음수부호를 포함하여 검사)
if( reg.test(num) == false ) num = num.toFixed(2);
if( !obj.useFixedValue ){
tg.text( num + obj.unit );
}else{
tg.text( obj.useFixedValue );
}
}
});//end. animate
} //AnimateText (jquery prototype)
})(jQuery); //enc. closer
$("[data-toggle='tooltip']").tooltip();
/************************************************************************
*
* @ProgressClass "2016.10.26. 허정진";
*
*************************************************************************/
var ProgressClass = function($tgID){
//private
var name = "ProgressClass";
//public
this.name = name;
this.minWidth = 3;
this.minInt = 0;
this.tgID = $tgID;
this.tgClass;
//constructor
this.constructor.classLength++;
this.constructor();
}
ProgressClass.prototype = (function(){
return{
constructor: function(){
if( ! this.tgID ){
throw new Error( "["+this.name+"] : 전달된 인자가 없습니다." );
return false;
}
this.tgClass = document.getElementById( this.tgID ).getElementsByClassName('progress-bar')[0];
},
init : function(){
this.tgClass.setAttribute("aria-valuenow", 0);
this.tgClass.style.minWidth = this.minWidth + "em";
this.tgClass.style.width = "0%";
this.tgClass.innerHTML = "0%";
},
setValue : function( $num ){
if( typeof $num == "undefined" ) throw new Error( "["+this.name+"] : setValue 전달된 인자가 없습니다." );
this.tgClass.setAttribute("aria-valuenow", $num);
this.tgClass.style.width = $num+"%";
//this.tgClass.innerHTML = $num+"%";
$(this.tgClass).AnimateText({num: $num, prevValueEnable:true, unit: "%"});
}
}
})();
var p = new ProgressClass("progress_1");
p.init();
setInterval(function(){
var randNum = Math.floor( Math.random() * 100 );
p.setValue( randNum );
$("#ani_num").AnimateText({num: randNum, prevValueEnable:true, useFixedValue: 100});
},3000);
//////////////////////////////
}); //end. rdy
</script>
</body>
</html>
'■ 프론트엔드 ■ > JavaScript' 카테고리의 다른 글
| MakeChartDate : 차트 데이터를 클라이언트에서 생성합니다. (0) | 2017.02.22 |
|---|---|
| ajax class - sendRequest-ajax.js (0) | 2016.12.02 |
| 자바스크립트 7일전 날짜와 현재 날짜 그리고 시간 구하기 (0) | 2016.09.26 |
| js에서 Trim, Ltrim, Rtrim 확장하여 사용하기 (0) | 2016.07.29 |
| Object.length 메서드 확장하여 사용하기 (0) | 2016.07.29 |
댓글