[자바스크립트] 간단한 토글(toggle) 버튼 만들기

간단한 토글(toggle) 버튼 만들기

눌러서 좌 우로 움직여서 on/off 를 표현하는 토글버튼을 생성해봤습니다.

↓아래 버튼을 눌러보세요.↓

버튼은 <div> 로 <button> 을 감싸는 형태로 만들었고

모션을 위해 setInterval() 함수를 사용했습니다.

코드입니다.

CSS

<style type="text/css">
    .toggleBG{background: #CCCCCC; width: 70px; height: 30px; border: 1px solid #CCCCCC; border-radius: 15px;}
    .toggleFG{background: #FFFFFF; width: 30px; height: 30px; border: none; border-radius: 15px; position: relative; left: 0px;}
</style>

자바스크립트

$(document).on('click', '.toggleBG', function () {
    var toggleBG = $(this);
    var toggleFG = $(this).find('.toggleFG');
    var left = toggleFG.css('left');
    if(left == '40px') {
        toggleBG.css('background', '#CCCCCC');
        toggleActionStart(toggleFG, 'TO_LEFT');
    }else if(left == '0px') {
        toggleBG.css('background', '#53FF4C');
        toggleActionStart(toggleFG, 'TO_RIGHT');
    }
});
 
// 토글 버튼 이동 모션 함수
function toggleActionStart(toggleBtn, LR) {
    // 0.01초 단위로 실행
    var intervalID = setInterval(
        function() {
            // 버튼 이동
            var left = parseInt(toggleBtn.css('left'));
            left += (LR == 'TO_RIGHT') ? 5 : -5;
            if(left >= 0 && left <= 40) {
                left += 'px';
                toggleBtn.css('left', left);
            }
        }, 10);
    setTimeout(function(){
        clearInterval(intervalID);
    }, 201);
}

HTML

<div class='toggleBG'>
    <button class='toggleFG'></button>
</div>

==내용추가==

버튼의 상태 값 가져오기

토글버튼의 현재 값을 불러오는 방법은 여러가지가 있겠지만, 한 가지 예를 들어보겠습니다.

버튼의 CSS 속성 중 'left' 값으로, 버튼이 ON 인지 OFF인지 판단할 수 있습니다.

버튼이 왼쪽에 붙어있다면 'left' 값은 0px일 것이고, 오른쪽에 붙어있다면 위의 예제에서는 40px일 것입니다.

따라서, <button> 태그에 id를 부여하면 아래의 함수를 통해 상태를 "on" 또는 "off"로 return 할 수 있습니다.

자바스크립트

function getToggleBtnState(toggleBtnId){
    const left_px = parseInt( $('#'+toggleBtnId).css('left') );
 
    return (left_px > 0)? "on" : "off";
}

HTML

<div class='toggleBG'>
    <button id='buttonID' class='toggleFG'></button>
</div>
<button onclick="alert(getToggleBtnState('buttonID'));">값을 보려면 여기를 눌러주세요</button>

예시