글
mixsh나 twtkr등에서 스크를 마지막에 가면 자동으로 다음 글들을 불러 오게 하는 자료입니다.
JQUERY로 짜여졌고 간단합니다.
엄청나게 간단하네요....;;;
링크에 실제 배포하는 사이트 남겨 두었습니다.
샘플보기(스크롤해서 내려 보세요) :
http://www.webresourcesdepot.com/dnspinger/
구조설명:
컨텐츠 페이지 구조
<div class="wrdLatest" id=1>content</div>
<div class="wrdLatest" id=2>content</div>
<div id="lastPostsLoader"></div>
로딩중 이미지 보여주는 부분과 실제 데이터 가져오는 부분
function lastPostFunc()
{
$('div#lastPostsLoader').html('<img src="bigLoader.gif">');
$.post("scroll.asp?action=getLastPosts&lastID=" + $(".wrdLatest:last").attr("id"),
function(data){
if (data != "") {
$(".wrdLatest:last").after(data);
}
$('div#lastPostsLoader').empty();
});
};
스크롤 감지하는 부분
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
lastPostFunc();
}
});
http://dev.dayis.net/17
JQUERY로 짜여졌고 간단합니다.
엄청나게 간단하네요....;;;
링크에 실제 배포하는 사이트 남겨 두었습니다.
샘플보기(스크롤해서 내려 보세요) :
http://www.webresourcesdepot.com/dnspinger/
구조설명:
컨텐츠 페이지 구조
<div class="wrdLatest" id=1>content</div>
<div class="wrdLatest" id=2>content</div>
<div id="lastPostsLoader"></div>
로딩중 이미지 보여주는 부분과 실제 데이터 가져오는 부분
function lastPostFunc()
{
$('div#lastPostsLoader').html('<img src="bigLoader.gif">');
$.post("scroll.asp?action=getLastPosts&lastID=" + $(".wrdLatest:last").attr("id"),
function(data){
if (data != "") {
$(".wrdLatest:last").after(data);
}
$('div#lastPostsLoader').empty();
});
};
스크롤 감지하는 부분
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
lastPostFunc();
}
});
http://dev.dayis.net/17
'JS > jquery' 카테고리의 다른 글
Lazy Load Plugin for jQuery (0) | 2012.01.16 |
---|---|
jQuery Fade In Scroll To Top Button With Smooth Scroll For Blogger (0) | 2012.01.16 |
Sticky Sidebar jQuery plugin (0) | 2012.01.16 |
jQuery를 이용해 스크롤바 따라다니는 레이어 만들기(IE6,IE7,IE8,크롬,사파리,파폭) (0) | 2012.01.16 |
UIScrollView에서 subview의 loading을 lazy하게 만들자 (0) | 2012.01.16 |
스크롤 페이징(Scroll Paging, Continuous scrolling pattern) (0) | 2012.01.16 |
How to Mimic the iGoogle Interface (0) | 2009.03.01 |
The 20 Most Practical and Creative Uses of jQuery (0) | 2009.02.27 |
jQuery Plugin (0) | 2009.02.23 |
jQuery 링크에 걸린 파일 사이즈 자동으로 알아내기 (0) | 2009.01.05 |
RECENT COMMENT