제목을 어떻게 해야할찌 몰라서.. 일단 [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 콜백에 대한 이해가 있으면,..
어렵지 않게 구현할수 있을것이다..
사실 내가 젤 어려웠떤건,..-_- 따옴표 처리문제..ㅜㅜ..
아무대로 에디터를 한번 따로 만들어봐야겠다..
————— updated 2012.07 —————–
간혹 리피러를 확인해보는데, 이 포스트가 검색에 걸려 읽으시는 분들에게…
이글은 2008년 2월에 작성한 글로써, 매우 전문적인지 않은 글이니… 그냥 그려려니 참고만하세요. 🙂
윗 글에서 몇가지 정정한다면,
1. 엘리먼트의 return false;
<a onclick=”이벤트함수이름(); return false;” href=”이동할 주소”>이동 링크 이름</a>
여기서 클릭 이벤트에 return false;를 하는 이유는 본래 a태그가 하는 기본 기능을 수행하지 않겠다는 의미입니다. a 태그의 기본 기능은 바로 href로 지정된 url로 이동하는 기능을 말합니다.
따라서 위와 같이 걸면, a 태그의 기본기능을 수행하지 않게 되는 거죠!
이거 a 태그뿐만 아니라 기본 기능이 걸려있는 모든 엘리먼트에 해당하는 내용입니다.
href=’#’ 으로 해시 값을 지정했을때는 새로 고침하지 않고, URL 뒤에 # 해시가 붙게 되는데,..
이런 해시값이 지저분하다고 느낄때도 return false를 넣어서 처리하곤 합니다.
2. 인라인 이벤트는 가급적 피하세요!
인라인 이벤트라 함은 앞에서 처럼 HTML 마크업에 바로 onclick=’어쩌고 저쩌고’ 하고 이벤트 핸들러를 할당하는 경우죠. 이거보다는 addEventListener 함수를 이용해 이벤트를 따로 등록하는 것이 좋습니다.
왜 이게 좋냐면,..
1. 마크업이 깨끗해집니다.
2. 같은 이벤트에 여러 핸들러를 중복해서 추가 할수있습니다. (인라인은 덮어버리죠!)
3. 인라인 핸들러가 정의되지 않는 시점(마크업이 그려지고 있는 시점)에 클릭하면 에러가 날수있습니다.
따라서 되도록이면 모든 마크업이 다 그려지고 나서 자바스크립트를 한번에 로드하고 처리하세요!