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


[제이쿼리] 매개변수가 있는 function을 HTML 엘리먼트에서 분리하기

View/JavaScript : 2009.09.22 17:35


매개변수가 없는 함수는 HTML에서 분리가 쉽습니다.

$(document).ready( function(){

    $("#comment_add").click(function() {
        $("form").submit();
    });

}

이런식으로 제이쿼리를 이용해서 click 이벤트가 발생했을 때 특정 폼을 서브밋하라고 이벤트를 등록할 수 있죠. 그러나;; 매개변수가 들어간 녀석들은 어떻게 할지 좀 난감합니다.

<img id="btn_list" class="action" src="<c:url value="/images/study/back.png"/>" onclick="javascript:fn_click_study(${meeting.study.id});"/>

예를 들어 위와 같이 특정 함수에 어떤 변수 하나를 넘겨줘야하는데, 그 값이 매번 달라지고, 목록 속에 들어있는 모든 요소들에 대한 것이라.. 페이지 로딩시에 위와 같이 등록하기가 좀...

그래서 같이 스터디 하는 형 중에 제이쿼리를 유리갤라만큼 하시는 분이 계셔서 물어봤더니 다음과 같이 해결해 두셨더군요.

<img id="btn_edit" class="action" src="<c:url value="/images/study/edit.png"/>" member="${meeting.study.id}" meeting="${meeting.id})" />

이렇게 엘리먼트에 임의이 속성을 추가합니다. 이제 페이지 로딩시에 등록할 수 있습니다.

$(document).ready( function(){

    $("#btn_edit").click(function(){
        var self = $(this);
        var url = '<c:url value="/study/"/>' + self.attr("study") + "/meeting/update/" + self.attr("meeting") + ".do";
        $(document).attr("location", url);

    });

}

아.. 그나저나 c:url 정말 악몽 같네요. 저거 없으면 context path가 루트여야만 제대로 동작하고.. @_@
아휴 귀차나.. ㅠ.ㅠ
top


내일은 꼭 Monaco 폰트 설치해야지

모하니?/Coding : 2009.07.20 23:13


모나코 폰트는 맥용 이클립스에서 기본으로 사용하는 폰트입니다. 평소 아주 이쁘고 깔끔하다고 생각만 하고 윈도에 설치할 생각을 못했었는데, 몇 일전 톱님께서 알려주신게 생각났습니다.

http://digg.com/programming/Monaco_Font_Free_for_Windows

여기서 어떻게 타고 들어가면 구할 수 있을 것 같으니.. 일단 링크 하나 걸어둡니다. 오늘도 맥북으로 봄싹 사이트 개발 때문에 끄적 거리다가.. 괄호를 쳤는데 한 눈에 딱.. 구분이 되니 아주 좋습니다.


위 코드는 제이쿼리 탭이며, 탭 내의 링크들이 컨테이너 밖으로 나가지 않고 그 안에 뿌려지게 해주는 코드랍니다. 출처는 제이쿼리 UI 홈입니다.ㅋ

top