만든사람은 ajax 보드라고 평범한 이름을 지었지만 , 내 마음대로 후리자 보드로 부르고 있는 보드를 흉내내보겠다.
후리자보드를 분석해볼려고 소스를 받아서 봤지만.. ajax의 가장큰 문제점인 난독성이 내눈을 어지럽혀 도중에 포기하고 말았다. 그래서 그냥 내맘대로 흉내를 내 보았는데..
후리자보드 따라하기 1 을 적을때 대충 이걸 응용하면 되겟다 싶었는데, 왠걸.. 직접 구현해 보니 이런 저런 걸리는 문제가 한두개가 아니었다. 다시금 후리자 만세 / >< /
여기서는 자세한 소스코드보단 나는 어떤식으로 구현했는지 아이디어만을 나열할예정이다.
내가 만든 코드를 다른 사람들도 쓸수 있게 컨버트하기가 무척이나 귀찮기 때문이다.
아이디어만 보고 이해가 되면 다행이고 이해가 안되면 내공을 더 쌓았으면 한다.
후리자보드는 iframe을 이용한것같다(말그대로 같다. 정확히 모르겠다)
하지만 난 후리자보드 따라하기 1 에서 생각했던 div 에서 style="overflow:auto" 를 이용해 보려고 한다.
구현하고자 하는 핵심은
리스트의 양에 따라 스크롤이 생기고 그 스크롤을 내리면 스크롤의 위치에 따라 리스트를 불러오는것이다.
이렇게 하면 좋은점은.. 그 구질구질하던 페이징을 안해도 된다는것과 사용자가 손쉽게 원하는 위치로 바로 바로 갈수 있다는것이다 . 여전히 이 방법에 회의를 가지고 옛것이 좋다며 페이징을 나누기를 고집하시는 분들도 있는데 그건 편할데로 하기 바란다.
사실 , 게시판처럼 글썼다 나왔다 하는 경우에는 좀 구현하지 귀찮은 면이 많은게 사실이지만 단순히 검색결과를 보여주거나 작은 화면에서 무한의 리스트를 보여줘야 할때 참으로 유용하다.
prototype 을 썼기때문에 prototype을 모르시는 분은 조금 이해하기 힘들겁니다.
prototype 간단한 설명
prototype 설명서
여튼 소스코드의 핵심은 아래와 같다.
<div id="scrollDiv__">
<table width=100% height="100%">
<tr>
<td valign="top">
<dl id="scrollContents"></dl>
</td>
<td width=1 valign="top">
<div id="scrollHeight"></div>
</td>
</tr>
</table>
</div>
무시할지도 모른다. 하지만 내가 이걸 생각해낸다고 얼마나 고생했는지 .. T^T
다른건 둘째치고 <div id"scrollHeight"></div> 이부분이 가장 힘들었다.
이것의 역활은 스크롤의 길이를 정해주는 역활이다.
나는 단순히 overflow만 해주면 될것으로 생각했는데, 스크롤을 내려도 내려고 점점 스크롤이 늘어나면서 끝이 나지 않는거였다. 이부분은 직접해보면 어떤 현상인지 알수 있으니 궁금하면 해보라.
여튼 설명하자면,
$('scrollContents') 부분에 내용이 들어가게 되는데 옆에 스크롤때문에 리스트가 길게 있을꺼라고 착각을 할뿐 사실은 10줄밖에 없다.
$('scrollHeight')의 높이 값으로 인해 $('scrollDiv__') 에 스크롤이 생기는것이고 사실은 스크롤을 내린다고 해서 $('scrollContents') 의 내용이 내려가는게 아니라는거다.
별개의 것이다. 아작스로 눈속임을 하는거다.
머.. 아작스 태생 자체가 눈속임이라고 난 생각한다. 실시간인척하지만 사실은 눈속임이라는것..
$('scrollHeight') 에서 스크롤을 내리면 DB로 가서 내린위치에 대비된 내용을 10줄 긁어와 scrollContents에 뿌려주는거다.
Event.observe('scrollDiv__','scroll',getPosition,false);
는 prototype 함수로 스타크래프트의 옵저버 처럼 계속 먼가를 감시하게 하는 함수다.
풀어 말하면 "scrollDiv__" 에서 "scroll"이 일어 날때마다 "getPosition" 이라는 함수를 실행하라 이다.
getPositon 함수는 아래와 같다
function getPosition(){
var curT=eval($('scrollDiv__').scrollTop)+500;
var oset=parseInt(curT/50-10);//소수점 없앤다
var rrr=(curT/50-10);
var coffset=50*eval(rrr);
$('scrollContents').style.paddingTop=coffset+"px";
getData(oset);//데이타를 불러와서 화면에 뿌려준다.
var t=curT+','+rrr+','+oset+','+coffset;
$('po').innerHTML=t;
}
굵게 칠한 숫자들을 적절히 조절하면 한페이지에 나올 줄수를 구할수 있다.
나는 한페이지에 5줄 나오게 설정한 상태다.
oset 은 넘어가서 mysql 에 쓰이게 되는데,
LIMIT oset,5
머 이런식으로 쿼리 붙게 된다.
getData 함수는 적절히 알아서 만들면 되겠다.
oset을 받아서 db에서 내용을 불러서 $('scrollContents')에 뿌려주면 된다.
마지막으로
getHeights();//초기 높이 정하기
가 필요하다.
이 함수도 서버로 아작스로 데이타를 리턴받아오게 되는데 받아온 값은
$('scrollHeight').style.height=받아온 높이값;
으로 쓰이게 된다.
높이는 내용이 보일 높이와 적절히 계산해서 하면될것같다.
허접한 강좌 끝가지 봐주셔서 대단히 감사합니다~ =,.=/
댓글 없음:
댓글 쓰기