글
간단히 말해서 페이지 갱신을 하지 않고 내용 갱신을 하는 것인데 (아니 말이 이상하네) ... 제일 좋은 예제는 http://www.happyfri.com/blog/ 블로그를 참조하시면 됩니다 (사실 이거 때문에 전 끌려서.. 에헤헤)
별도로 소개할 수 있는 내용이 없으니 스샷은 없고, 저도 적용은 더욱 심화하는것보다 이정도에서 끝내려고 합니다(위젯 덕지덕지인 브롤그에 쓰시면 좋을것 같네요). 그런고로, 일반적 스킨에서 적용할 수 있는 적용 방법을 간단히 적어놓고 ... 그렇게 오늘의 삽질, 종료![절대 학생회의 일존이라던가를 따라하지 않았습니다]
물론 해보고싶으신 분들만 백업 철저히 해놓고 마음대로 하세요.
난 옛날처럼 시간이 남아나지 않으니까 A/S는 직접 보고서 해줄 분들만 해줄꺼에요.
http://kuna.wo.tc/1220
별도로 소개할 수 있는 내용이 없으니 스샷은 없고, 저도 적용은 더욱 심화하는것보다 이정도에서 끝내려고 합니다(위젯 덕지덕지인 브롤그에 쓰시면 좋을것 같네요). 그런고로, 일반적 스킨에서 적용할 수 있는 적용 방법을 간단히 적어놓고 ... 그렇게 오늘의 삽질, 종료!
1. jQuery 프레임워크 와 scrollTo 확장 플러그인 자바스크립트 파일 및 로딩 시에 쓰일 이미지를 티스토리에
올려봅시다. 귀찮으니까 제가 손수 준비한 파일을 쓰시면........ 되겠지요. (물론 scrollTo의 저작권은 여기에, jQuery의 저작권은 여기에, 로딩 이미지는 여기에 저작권이 있음을 알립니다아)
2. <head>~</head> 사이의 적당한 곳에 이 코드를 넣습니다.
3. 보시면 아시겠지만, loadPage라는 함수를 이용해서 사용이 가능합니다.
(1) 검색 위젯 부분
(2) 최근 포스트 위젯 부분
(3) 방명록 같은 메뉴 부분
사용법은 보시면 아시겠지만 간단하게 onclick="loadPage('[이동할 URL]') return false;"이면 된다는 것을 알 수 있습니다.
또, 그리고 만들어 놓은 추가 함수로 이렇게 사용이 가능합니다.
(4) 하단의 페이징 부분
AJAXTest.rar2. <head>~</head> 사이의 적당한 곳에 이 코드를 넣습니다.
<!-- AJAX Part -->
<script src="./images/jquery-1.4.2.min.js" language="javascript"></script>
<script src="./images/jquery.scrollTo-min.js" language="javascript"></script>
<script language="javascript">
function loadPage(url) {
$("#content").html("<center><img src='./images/ajax-loader.gif'></center>");
$.scrollTo( $('#content'), 800 );
var dest_url = url.substring(0, url.indexOf("#"));
if (dest_url == "") dest_url = url;
$.get(dest_url, function(data) {
var obj = $(data);
var ihtml = obj.find("#content").html();
$("#content").html(ihtml);
var dest_id = url.substring(url.indexOf("#"));
$.scrollTo( $(dest_id), 800, {queue:true} );
});
}
function loadPage_paging(paging_url) {
var url = paging_url.href;
loadPage(url);
}
</script>
3. 보시면 아시겠지만, loadPage라는 함수를 이용해서 사용이 가능합니다.
(1) 검색 위젯 부분
<s_search>
<input type="text" name="[ ##_search_name_## ]" value="[ ##_search_text_## ]" onkeypress="if
(event.keyCode == 13) { loadPage('/search/' +
document.getElementsByName('search')[0].value.replaceAll('%', '%25'));
}"/>
<input value="search" type="button" onclick="loadPage('/search/' + document.getElementsByName('search')[0].value.replaceAll('%', '%25'));" class="submit"/>
</s_search>
(2) 최근 포스트 위젯 부분
<a href="[ ##_rctps_rep_link_## ]" onclick="loadPage('[ ##_rctps_rep_link_## ]'); return false;"> [ ##_rctps_rep_title_## ]</a>
＊deVbug님이 내주신 좋은 코드 덕택에 최근 덧글/최근 트랙백 모듈에도 사용가능합니다! 해당 코드는 위에 새로 넣어놓은 상태이고요, deVbug님, 감사합니다~! (3) 방명록 같은 메뉴 부분
<a href="[ ##_guestbook_link_## ]" onclick="loadPage('[ ##_guestbook_link_## ]'); return false;">guestbook</a>
사용법은 보시면 아시겠지만 간단하게 onclick="loadPage('[이동할 URL]') return false;"이면 된다는 것을 알 수 있습니다.
또, 그리고 만들어 놓은 추가 함수로 이렇게 사용이 가능합니다.
(4) 하단의 페이징 부분
<s_paging>
<div class="paging">
<a [ ##_prev_page_## ] onclick="loadPage_paging(this); return false;" class="[ ##_no_more_prev_## ]"><< previous </a>
<span class="numbox">
<s_paging_rep>
<a [ ##_paging_rep_link_## ] onclick='loadPage_paging(this); return false;' class="num"> [ ##_paging_rep_link_num_## ]</a>
</s_paging_rep>
</span>
<a [ ##_next_page_## ] onclick="loadPage_paging(this); return false;" class="[ ##_no_more_next_## ]">next >></a>
</div>
</s_paging>
물론 해보고싶으신 분들만 백업 철저히 해놓고 마음대로 하세요.
난 옛날처럼 시간이 남아나지 않으니까 A/S는 직접 보고서 해줄 분들만 해줄꺼에요.
http://kuna.wo.tc/1220
'JS > jsajax' 카테고리의 다른 글
| 설치형 TC에 Ajax 적용해보았다. (0) | 2012.01.16 |
|---|---|
| 비 전문가를 위한 XMLHttpRequest 활용 소개 (0) | 2009.01.12 |
| 세션 상태를 사용하여 불필요한 Ajax 트래픽 피하기 (한글) (0) | 2009.01.05 |
| Ajax로 실시간 갱신 하기 (0) | 2008.06.21 |
| 한번에 페이지내의 모든 이미지의 링크 점선/테두리 없애는 스크립트 (0) | 2008.05.30 |
| 레이어형식 화면고정하는, 스크롤바를 따라다니는 TOP 버튼 (0) | 2008.02.26 |
| 새 창의 링크로 부모창에 결과출력 (0) | 2008.02.26 |
| [JS] 스크롤바 따라다니는 메뉴 2 (0) | 2008.02.26 |
| [JS] 스크롤바 따라다니는 메뉴 1 (0) | 2008.02.26 |
RECENT COMMENT