[JQuery] load()를 사용하여 10개 더보기를 구현해보자

요즘 스마트폰을 보다보면 T store같은 [10개 더보기] 버튼과 같이
페이지 이동없이 현재 페이지 하단에서 게시물이 10개가 더 늘어나게 만들어진 게시판들이 있다.
이것을 JQuery의 load()를 사용하여, 만들어보자.

PHP의 페이징, 물론 돌아다니는, 쉽게 구할수 있는 소스가 많기때문에 언급을 하지 않겠지만

살짝 얘길 하자면

<a href="?page=<?=$i?>"><?=$i?></a> 의 형태와 같이 페이징이 되어 있을텐데..
(옛날것만 기억해서 그런가 난 아직도 이거 쓴다 ㅡ_ㅡ;;)
암튼 위와 같은 형태를

<span id="page_<?=$i?>" class="bt_page"><?=$i?></span> 등으로 꾸며
JQuery로 일괄 버튼 형태로 만들어버린다. 

이쯤에서 JQuery로 load()를 사용하여, 특정 페이지를 불러오고
그 내용들을 특정 ID 값을 가진 섹션에 넣어주면 된다.

list.php의 구조를 살펴보면
로딩이 되면서 바로 load.php를 불러온다.
load.php에서는 페이징에 관련된 php코드와 함께 리스트화 시킬 html코딩(div던, table코딩이던간에..)이 나열되고
이것은 list.php이 로딩 됨과 함께 자동으로 load()한번 해주고

로딩된 load.php내에서 $(".bt_page").live("click", function() {
이벤트로 다시 한번 load()를 함으로써 페이징 이동 효과를 만들수 있다.

fadeTo()를 중간에 삽입하면서 swf나 움직이는 gif를 넣어 로딩중~ 이라는 효과도 만들고 보면 재밌다. -_-;;

만들어놓은게 있긴 하지만 업무보안상 불가능하고..

누군가가 필요하다면 한번 예쁘게 만들어보고 싶은 생각도 있다.. ㅡ_ㅡ;;;