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.


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

View/JavaScript : 2009. 9. 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

  1. Favicon of https://helols.tistory.com BlogIcon is윤군 2009.09.22 18:00 신고 PERM. MOD/DEL REPLY

    임의 attr 추가는 왠지 .. 꺼림직 한데요;;ㅎㅎ

    Favicon of http://whiteship.me BlogIcon 기선 2009.09.22 20:28 PERM MOD/DEL

    좀.. 그렇긴 해;;
    다른 방법도.. 있겠지?

  2. Favicon of http://toby.epril.com BlogIcon 토비 2009.09.22 18:34 PERM. MOD/DEL REPLY

    그르게

    Favicon of http://whiteship.me BlogIcon 기선 2009.09.22 20:30 PERM MOD/DEL

    음...

  3. Favicon of http://nije.pe.kr BlogIcon 김재진 2009.09.23 08:38 PERM. MOD/DEL REPLY

    유리겔라 ㅋㅋ

    Favicon of http://whiteship.me BlogIcon 기선 2009.09.23 10:46 PERM MOD/DEL

    난 "마틴 플라워" 라고 한적도 있어.

  4. Miracle 2009.09.23 10:49 PERM. MOD/DEL REPLY

    HTML5에 클라이언트 사이드 Database가 표준화 된다는 소문이 있으니....

    그때 쯤이면 저런 꽁수를 사용하지 않아도 되지 않을련지 ^^

    Favicon of http://whiteship.me BlogIcon 기선 2009.09.23 12:29 PERM MOD/DEL

    앗 유리갤라 횽이다.

  5. Favicon of http://steelheart.kr/ BlogIcon 전성하 2009.09.23 17:30 PERM. MOD/DEL REPLY

    a h r e f="/${meeting.study.id}/${meeting.id}"
    i m g id="btn_edit" class="action" src="/images/study/edit.png" ....
    /a

    이런 식으로 하는것도 괜찮지 않을까요?
    접근성 측면이나 시맨틱 마크업 차원에서도 맞는거 같고 자바스크립트가 없어도 링크가 잘되요.

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

    그렇군요...img 보다는 a 태그가 좋겠네요.

  6. Favicon of http://blog.lckymn.com BlogIcon Kevin 2009.09.23 18:53 PERM. MOD/DEL REPLY

    저렇게 사용하면 구버전 브라우저들에서 제대로 동작하지 않을것 같군요.
    따로 사용해야하는 값을 어딘가에 저장해 놔야 한다면,
    hidden type을 쓰시면 될것 같은데요.

    <input type="hidden" id="btn_edit_member" value="${meeting.study.id}" />
    <input type="hidden" id="btn_edit_meeting" value="${meeting.id})" />
    이러면 self.attr("study" ) / self.attr("meeting" ) 대신에
    $("#btn_edit_member" ).val() / $("#btn_edit_meeting" ).val()
    이렇게 쓰시면 되지 않을까요?

    뭐 이런걸 피하고 한곳에 몰아 넣고 싶으신것 같긴합니다만...

    근데 더 문제가 되는건 역시, 이미 다른분께서도 얘길 꺼내셨지만,
    accessibility 인거 같네요.
    아무래도 img 태그 보다는...
    submit, button, image type의 input element 나 anchor 태그를
    사용하는게 나을것 같습니다.

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

    아;; 히든 타입!!
    임의 속성 정의 대신 히든 타입을 사용할 수 있겠군요.

    음.. 역시 img 보다는 앵커나 버튼 태그가 낳겠네요.

    와우! 감사합니다.

Write a comment.


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

모하니?/Coding : 2009. 7. 20. 23:13


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

http://digg.com/programming/Monaco_Font_Free_for_Windows

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


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

top

  1. Favicon of http://blog.lckymn.com BlogIcon Kevin 2009.07.21 00:26 PERM. MOD/DEL REPLY

    저는 리눅스 쓰는데, 저도 Monaco 사용합니다. :)
    예전에 캐나다쪽에서 나온 OSGi관련된 PPT였던가? 암튼 보다보니 소스코드 부분에
    사용한 폰트가 가독성도 좋고 너무 괜찮길래 찾아봤죠.
    무슨 폰트인지 알턱이 없었지만, 딱보니 이쁜게 "이건 맥이다!"
    싶어서 맥용 fixed width font 찾으니까 모나코가 뜨더라구요.
    그당시 제가 찾은 링크가 이건데,
    http://www.gringod.com/2006/11/01/new-version-of-monaco-font/
    다행히 윈도용 뿐 아니라 리눅스용도 있더라구요.
    혹시 이거보다 더 새버전 아시면 좀... :)

    Favicon of https://whiteship.tistory.com BlogIcon 기선 2009.07.21 09:53 신고 PERM MOD/DEL

    넹ㅎㅎ아마 리눅스 용은 같이 스터디하는 친구들이 구할지 싶네요. 최신 버전 구한 친구가 있으면 알려드리겠습니다.

  2. Favicon of http://justinchronicles.net BlogIcon 쟈스틴 2009.07.21 09:05 PERM. MOD/DEL REPLY

    개인적으로 윈도우환경에서 쓰실 요량이라면 Consolas 폰트를 추천합니다. 오피스2007과 비스타에서 기본적으로 제공하는 폰트이지요. 아마 마이크로소프트 웹사이트 뒤져보시면 찾으실 수도 있겠구요.

    윈도우환경에서 모나코 폰트는 렌더링이 좀 이상하더라구요.

    Favicon of https://whiteship.tistory.com BlogIcon 기선 2009.07.21 09:52 신고 PERM MOD/DEL

    음... 아직 Monaco 폰트를 적용해보지 않았는데요.
    참고하겠습니다. 감사합니다. :)

  3. Favicon of http://kyeomstar.tistory.com BlogIcon 이석겸 2009.07.22 09:13 PERM. MOD/DEL REPLY

    이거 적용해봤는데 첨엔 좀 이상하다가 적응하니 이쁘고 괜춘하다.ㅎㅎ

    Favicon of http://whiteship.me BlogIcon 기선 2009.07.22 12:05 PERM MOD/DEL

    난 해봤다가 영.. 이상해서 다시 원래 폰트로 돌아갔어.
    역시.. 맥북에서 써야 제맛인듯. 캬캬

  4. Favicon of http://blog.lckymn.com BlogIcon Kevin 2009.07.22 21:26 PERM. MOD/DEL REPLY

    걸어 놓은 링크에 윈도용도 있는데, 벌써 찾아서 잘 쓰고 계신 모양이군요. :)

    Favicon of https://whiteship.tistory.com BlogIcon 기선 2009.07.22 22:28 신고 PERM MOD/DEL

    넵ㅎㅎ 디스플레이 설정에서 뭔가를 바꿔줬더니 아주 이쁘더라구요.

Write a comment.