Whiteship's Note


[제이쿼리] 마우스 오버/아웃 이벤트 사용하기

모하니?/Coding : 2009. 10. 12. 20:59


출석체크를 할 때, 체크 모양의 버튼을 누르면 결석이 되고.. 결석 버튼을 누르면 출석이 되는 형태의... 비 직관적인 뷰를 만들었었습니다.

버튼을 두 개 만들기 귀찮아서 버튼 하나를 두고 On/Off 버튼 식으로 만들었는데, 현재 상태를 체크 모양 자체가 현재 상태를 나타내고, 그것을 한 번 누르면 결석으로 바뀌게 한 것이죠.

만든 저야.. 로직까지 포함해서 잘 이해가 되지만, 첨보는 팀원은 굉장히 햇갈려 하더군요. 이해합니다. 곰곰히 생각하다가 어제 맥북으로 사진 정리하다가 iPhoto에서 얼국 인식을 하는데, 내 얼굴인지 아닌지 확인할 때의 UI가 떠올랐습니다. 딱.. 그 UI가 출석체크와 비슷한 로직이었습니다.

다른 것은 하나.. 마우스가 올라갈 때, 해당 버튼이 어떤 이벤트를 할 지 알려준다는 것입니다.

"본인이면 클릭하세요." 에서 마우스를 클릭하면 "백기선님으로 확인되었습니다."로 바뀌고 거기서 마우스가 올라가면 "백기선님이 아닙니까?"로 바뀌죠. 그걸 또 다시 클릭하면, "백기선님이 아닙니다."로 바뀝니다.

오호.. mouse over 이벤트만 사용하면 되겠군...  생각하고 적용해봤습니다.

    $(".btn_attend_member").mouseover(function(){
        $(this).attr("src", "<c:url value='/images/remove-16x16.png'/>");
    }).mouseout(function(){
        $(this).attr("src", "<c:url value='/images/accept-16x16.png'/>");
    });

    $(".btn_absend_member").mouseover(function(){
        $(this).attr("src", "<c:url value='/images/accept-16x16.png'/>");
    }).mouseout(function(){
        $(this).attr("src", "<c:url value='/images/remove-16x16.png'/>");
    });

버튼이 아니라;; 이미지를 사용하고 있어서 좀.. 그렇긴 하지만 그건 나중에 바꾸기로 하고.. 일단 저렇게 이벤트를 등록해놓고 마우스를 올렸다 내렸다 해봤더니.. 잘 되는겁니다. ㅋㅋㅋ 그때까진 좋았죠.

하지만...

Ajax 요청을 보내고 나서 결석 상태를 출석으로 바꾸고 났을 때, 출석 상태인데도 마치 결석 상태처럼 마우스가 밖에 있으면 결석(현재 상태), 마우스가 이미지로 올라가면(다음 이벤트) 출석 상태를 보여주는 겁니다. @_@

문제 원인은 페이지 로딩시에 저 이벤트를 한 번 등록해두면 설령 Ajax 요청 처리에서 css를 바꾼다 하더라도 저 이벤트들을 다시 등록하진 않기 때문입니다.(좀 더럽지만... 화장실에서 볼 일 보며 곰곰히 생각해보니.. 왜 그런지 알겠더군요.)

그래서..

var changeImageSrcWhenMouseOverOut = function () {
    $(".btn_attend_member").mouseover(function(){
        $(this).attr("src", "<c:url value='/images/remove-16x16.png'/>");
    }).mouseout(function(){
        $(this).attr("src", "<c:url value='/images/accept-16x16.png'/>");
    });

    $(".btn_absend_member").mouseover(function(){
        $(this).attr("src", "<c:url value='/images/accept-16x16.png'/>");
    }).mouseout(function(){
        $(this).attr("src", "<c:url value='/images/remove-16x16.png'/>");
    });
};

이렇게 함수를 하나 만들고, 이 녀석을 페이지 로딩 할 때 한 번, Ajax 요청을 처리한 뒤 한 번 호출 하도록 코딩했더니.. 원하던데로 동작하게 되었습니다. 음하핫;;

안타깝지만, 관리자만 할 수 있는 기능이라 여러분을 볼 수가 없겠군요... @_@
top

  1. 지나가다 2009.10.12 21:13 PERM. MOD/DEL REPLY

    hover 메쏘드를 사용하시면 더 간결해 집니다. 이렇게...

    $(~~) . hover(
    function () {
    // mouseover 동작
    },
    function () {
    // mouseout 동작
    }
    );

    Favicon of https://whiteship.tistory.com BlogIcon 기선 2009.10.12 21:19 신고 PERM MOD/DEL

    오홋!! 감사합니다~

  2. Miracle 2009.10.13 12:04 PERM. MOD/DEL REPLY

    Ajax 적용 시키면서 만들려다가 말았던 기능인데.. ^^;

    Favicon of https://whiteship.tistory.com BlogIcon 기선 2009.10.13 12:11 신고 PERM MOD/DEL

    그때 만드셨어야죠!!
    일부러 저 제이쿼리 공부하라고 안 하시는거 아니에요?

  3. Miracle 2009.10.13 13:37 PERM. MOD/DEL REPLY

    그런 심오한 뜻은 없고... 단지 귀찮아서.. 그런거;;;

    Favicon of https://whiteship.tistory.com BlogIcon 기선 2009.10.13 14:18 신고 PERM MOD/DEL

    ㅋㅋ넹

Write a comment.