웹마스터 팁

꽤 오래 고민한건대.......

해답은 역시 내려 놓았을때 나온다고 하였나요?


http://internetbat.com/nexonvsnc


데모페이지구요

데모페이지 이용방법은 죄송스럽게도 로그인은 꼭 하셔야 하는 ㅠ

그래야 새로고침 UI랑 추천 등이 가능해서 입니다.


우선 jquery의 load함수를 이용하는건대요


이제까지 저의 생각도 class단에서 해결봐야한다는 압박에 시달렸습니다.

jQuery('????').load('xxx.php');

식의 load함수 구현 뿐이 안되었기 떄문이죠.


이게 문제가 무엇이냐면

XE는 각개 페이지가 움직이는게 아니고

프론트 html만 존재하고 실상은 class.php다 컨트롤 하고 있으니

저런 파일자체를 딸수가 없는 상황인거죠


그렇다면 class단에서 ajax를 넣어 주어야 한다는 압박감에

귀차니즘으로 미루다가


생각해보니깐 어차피 UI인데 눈에만 보이면 되지 않냐?

는 생각이 급 들었습니다.


그래서 생각해낸게


글목록을 <div id="list"> 글목록내용 </div>

로 감싸고


js에는

function refresh(href) {

jQuery('#list').load(href);

}


리프레쉬 할 링크 (클릭시 새로고침, 추천버튼 등)에

<a onclick="refesh(http://internetbat.com/{$mid} #list)">클릭시 새로고침</a>


인겁니다.


즉, jQuery가 자바스크립트처럼 getelementID 따위가 아니고  jQuery('#xxx #xxx img') 등 마치 css 잡아주는 느낌의 것들도 다 컨트롤 할수 있다는 점에 착안한 점입니다.


물론 stack overflow를 참조하기도 하였습니다만

위에 올렸던 데모페이지에서 보시면 아무 이동없이 깔끔히 새로고침 및 추천이 되는것을 확인할 수 있습니다.

이것은 모바일에서도 동일 작동하고있습니다.


혹시 저와같은 고민이 있으셨던 많은 분들을 위해 작은 코멘트 올려봅니다.


--------------------------------------------------------------------------------------------------------

대충 소스를 날려썼더니

제가봐도 뭐어쩌라는건지 잘모르겠네요..


조금 쉽게 예시를 들어드리겠습니다.


- 페이지이동없이 글목록 불러오기. (댓글, 추천 어디든 상관없습니다.)


<!--새로고침 유도 div-->

<div id="refresh_layer"><a onclick="refesh(http://internetbat.com/{$mid} #list)">클릭시 새로고침합니다.</a></div>


<!--글목록-->

<div id="list">

글목록, 추천, 댓글 등을 감싸세요.

</div>


<!--스크립트 (위치는 무상관. 추천 위치 : head안, 문서의 맨아래. 대세는 맨아래. 저는 아무대나)-->

<s-ript>

function refresh(href) {

jQuery('#list').load(href);

}

</s-ript>


이게 끝입니다.



- 자동새로고침


<s-ript>
var ref_t = setInterval(function (){
jQuery('#list').load('http://internetbat.com/{$mid} #list_load').fadeIn('slow');, 6000);
</s-ript>

6초당 한번씩 새로고침합니다.

서버에 부하가 걸립니다.


ajax가 아니라 눈으로는 그렇지만 실제로는 페이지 전체 (물론 이미지등은 이미 로드되어있으니 html,php코드만)를 로딩해서 byte수준이 아닌 kb수준으로 리로딩됩니다.

저의 경우는 13~4kb정도 로딩됩니다.

XE를 쓰시는 분이라면 거의 동일할것으로 생각됩니다.


그래서 한시간동안 아무짓도 안하면 중지 시켜버려야겠습니다.


<s-ript>
var ref_t = setInterval(function (){
jQuery('#list').load('http://internetbat.com/{$mid} #list_load').fadeIn('slow');, 6000);


setTimeout(function() {

clearIntervar(ref_t)}, 3600000);
</s-ript>


본 소스는 실제 돌아가는 소스를 넣은게 아니라

임의로 작성한 소스이므로 오타등이 있을 수 있습니다.


실제로 작동 시킬때는 여러변수를 잘 생각하셔야 합니다.

예를 들면 댓글에다가 붙혔을때는 대댓글을 쓰다가 리로드되어 대댓글 창이 사라져서

저의 경우는 대댓글클릭시 clearInterval로 중지시켜버립니다.

댓글 안쓰면 어쩔 수 없는 거지만 UX상 대댓글쓸려다말면 어차피 딴거 클릭할꺼같아서 이정도로만 뒀습니다.


자동으로 돌아가는

일반게시판 예시 : http://internetbat.com/jjal


클릭시 새로고침이 있지만 setinterval로 10분돌리다가 별 움직임이 없으면 clear시키고 클릭시 새로고침을 주는 방식으로 해서 보시려면 10분 기다리셔야되는 예시 : http://internetbat.com/index.php?mid=jinbovsbosu

제목 글쓴이 날짜
XE 위키에 최근 접속 페이지 정보 출력 file 개돌 2009.04.27
별도 페이지 로그인방법 cornet 2009.05.21
로그인 페이지 만드는 방법 [5] 산토 2009.06.12
로그인 후 그룹별로 다른 페이지로 가기 - 업데이트판 v1.5 [19] 무대포2 2009.06.24
페이지 제일 위로 바로가는 Top 버튼 [5] file 개돌 2009.06.26
홈페이지 헤더부분에 display.handler.class.php 오류발생시 급해결방법 [3] file 극마 2009.08.09
RSS를 활용한 HelloMaster 홈페이지 새글 알리미 설정하기 [3] file 퍼니온 2009.08.16
페이지 작성 시 팁. 꼬꼬마 초보만 오세요. 배치 문제.. [7] 연필깎는까치 2009.08.20
위젯에서 페이지 기능 활용 팁 [3] 라르게덴 2009.10.05
-추가- 당신의 XE 기반 홈페이지를 훅가게 하는 방법 4가지 [26] 老姜君 2009.10.08
제로보드 XE - 1.3.x 설치부터 기본 홈페이지 만들기 스타호스트 2009.12.05
웹페이지 메시지 만들기 [초보자대응] [6] file cabnb 2009.12.09
초보팁] 외부페이지에서 가져올 시 새창 띄우기 안되는거 수정하기(자바) [1] 파라테일 2009.12.10
홈페이지에 BGM달기 [1] SHIN군 2010.01.18
로그인페이지와 새페이지 연결법 [2] poko 2010.01.30
페이지 수정 내용직접추가 에러 나시는 분들께.. [1] 청개굴이 2010.02.19
로그인 후 특정 그룹 페이지 가기 다른버전 [9] 눈물많은OrOi 2010.02.22
conditional comment 을 이용한MS Internet Explorer 6이하 접속시 안내 페이지 유도 [접속 차단] 예제 [3] file 게임나라 2010.02.26
중복. JS버전. 관리자 페이지-트리뷰 계속 확장상태로 두기 봉남 2010.03.02
[마지막팁] 제로보드4 처럼 레이아웃 없이 XE로 나만의 홈페이지 만들기 [6] Gekkou 2010.03.08