jQuery vortex 플러그인을 이용해 만든 다이얼기능

jQuery vortex 플러그인을 이용해 만든 다이얼기능

Flash의 비중이 계속 사라지고 있는 요즘

진보되고 있는 CSS도 CSS3, HTML5의 발전으로 인해 이젠 간단한 애니메이션 정도는 누구나 다 할 수 있게 된거 같다

프론트앤드에서 jQuery는 없어선 안될 존재가 되어버렸다

난 상위 1%의 개발자가 아니기 때문에 누군가 잘 만들어 놓은 플러그인을 가져다 잘 활용해 만드는 응용프로그래머 이기 때문에

하나의 프로젝트를 위해 오늘도 난 구글신에게 상위1%가 만든 플러그인좀 주이소 하고 빌게 되었다

vortext라는 플러그인은 아래 첨부된 파일을 받으면 된다

jquery.vortex.js

이 플러그인은 내가 굳이 머리를 쥐어 짜가며 만들지 않아도 아주 잘 만들어 놓은 플러그인이다

기능은 수학의 삼각함수(sin,cos,tan)를 이용해 객체를 동그랗게 움직이게 하는 액션이다

다이얼패드 처럼돌아가는건데 해당 플러그인의 api는 구글링하면 금방 찾을 수 있고

난 그를 이용해 6시 방향을 기점으로 다이얼을 움직이는 기능을 구현했다

플러그인은 찾았지만 이를 이용해 고객이 원하는 이벤트를 만들어 내는 것도 참 고생을 했다

총 12개의 숫자를 이동 시키는 건데 나름 재밌게 만들어 뿌듯하다

혹시나 이를 이용해 더 크리에이티브적인 결과물을 창조해 낸 당신은 역시나 프로 응용프로그래머 ^^

: JS

    $(function() {
        $('#vortex').vortex({
            speed:20,
            clockwise: true,
            manualAdvance: true,
            beforeAnimation: null,
            afterAnimation: null
        });

        $('.square-button').click(function(){
            nTxt = $(this).attr('index');
            move_vortext('direct', nTxt);
        });
    });

    var seq = new Array('/11/', '/10/', '/9/', '/8/', '/7/', '/6/', '/5/', '/4/', '/3/', '/2/', '/1/', '/0/');

    var move_vortext = function(act, txt) {
        var clock        = false;
        var custom        = false;

        switch(act) {
            case 'next'    :
                txt        = seq[10];
                clock    = true;
                custom    = true;
            break;
            case 'prev' :
                txt    = seq[0];
                custom    = true;
            break;
            default:
                clock    = true;
                sTxt = txt.replace(/\//g, '');
            break;
        }

        nIdx = seq.indexOf(txt);

        if	(nIdx != 11) {
            seq            = seq.concat(seq.splice(0,nIdx+1));
            rIndx        = 11-nIdx;
            if    (custom)
                rIndx    = 1;
            $('#vortex').data('vortex').setClockwise(clock);
            $('#vortex').data('vortex').step(rIndx);
        }
    }

: CSS

<style type="text/css">
.square-button {
    height: 50px;
    position: absolute;
    width: 50px;
    border-radius: 35px;
    background:#718fad;
    color:#fff;
    cursor:pointer;
    line-height:50px;
    filter: progid:DXImageTransform.Microsoft.gradient(     startColorstr='#3f4c6b',
        endColorstr='#3f4c6b', GradientType=0);
	text-align:center;
}

#vortex {
    width: 280px;
    height: 280px;
    position: relative;
}
</style>

: HTML

<div id="vortex">
    <div index="/3/" class="square-button">3</div>
    <div index="/4/" class="square-button">4</div>
    <div index="/5/" class="square-button">5</div>
    <div index="/6/" class="square-button">6</div>
    <div index="/7/" class="square-button">7</div>
    <div index="/8/" class="square-button">8</div>
    <div index="/9/" class="square-button">9</div>
    <div index="/10/" class="square-button">10</div>
    <div index="/11/" class="square-button">11</div>
    <div index="/0/" class="square-button">0</div>
    <div index="/1/" class="square-button">1</div>
    <div index="/2/" class="square-button">2</div>
</div>