마이크온블로그닷컴 ::Just Quit your Job!::

제목을 어떻게 해야할찌 몰라서.. 일단 [Ajax 토글형 댓글 링크 버튼] 이라고 적고 시작한다.
이게 어떤거냐면,.. Me2day에 있는 댓글(0) 버튼이라고 생각하면 된다.
미투데이에 요 버튼이 좀 재밌는데.. 버튼이라고 하면, 보통 input 태그를 이용한 버튼을 이용하지만..
요건 링크와 자바스크립트 그리고 CSS 스타일을 적절히 이용한다.

먼저 링크,
링크는 보통 아래처럼 이용한다.
<a href="이동할 주소">이동링크이름</a>
<a href="./comment">댓글</a>

여기에 자바 스크립트를 적용해서 이벤트를 걸면,..
<a onclick="이벤트함수이름();" href="이동할 주소">이동 링크 이름</a>
<a onclick="comment_list_toggle();" href="./comment">댓글</a>

위에 처럼 쓰는게 보통인데.. 위에 경우엔 보통 링크를 클릭하면 해당 링크로 점프를 띤다.
그러면 당근 버튼 효과를 내지 못한다.. 그래서 아래처럼..

<a onclick="이벤트함수이름(); return false;" href="이동할 주소">이동 링크 이름</a>
<a onclick="comment_lists_toggle(); return false;" href="./comment">댓글</a>

자바스크립트에 false를 리턴하게 되면, 클라이언트에서 서버로 전송을 하지않고, 클라이언트에서 함수만 실행하고 종료를 하게 된다. 보통 취소 버튼을 구현할때 요걸 많이 쓴다.

그러면 바로 요 이벤트 함수를 통해서 comment 라고 지정해둔 id 태그의 스타일을 변화시키면 된다.
<script type="text/javascript">
//<![CDATA[
        function comment_lists_toggle() {
            if(document.getElementById("comment").style.display=="none")
            {
                document.getElementById("comment").style.display="";
            }   
            else
                document.getElementById("comment").style.display="none";          
        }
//]]>
</script>

기본은 머 저렇게 하면되는데... 기본적으로 Ajax 콜백에 대한 이해가 있으면,..
어렵지 않게 구현할수 있을것이다..

사실 내가 젤 어려웠떤건,..-_- 따옴표 처리문제..ㅜㅜ..
아무대로 에디터를 한번 따로 만들어봐야겠다..