本文实例讲述了jQuery实现的自动加载页面功能。分享给大家供大家参考,具体如下:
demo.html:
---------------
阅谁问君诵,水落清香浮
阅谁问君诵,水落清香浮
阅谁问君诵,水落清香浮
阅谁问君诵,水落清香浮
阅谁问君诵,水落清香浮
阅谁问君诵,水落清香浮
阅谁问君诵,水落清香浮
阅谁问君诵,水落清香浮
+++++++++++++++
scrollpagination.js:
= $(document).height() - $(target).height();
if (mayLoadContent){
if (opts.beforeLoad != null){
opts.beforeLoad();
}
$(obj).children().attr('rel','loaded');
$.ajax({
type: 'POST',url: opts.contentPage,data: opts.contentData,success: function(data){
$(obj).append(data);
var objectsRendered = $(obj).children('[rel!=loaded]');
if (opts.afterLoad != null){
opts.afterLoad(objectsRendered);
}
},dataType: 'html'
});
}
};
$.fn.scrollPagination.init = function(obj,opts){
var target = opts.scrollTarget;
$(obj).attr('scrollPagination','enabled');
$(target).scroll(function(event){
if ($(obj).attr('scrollPagination') == 'enabled'){
$.fn.scrollPagination.loadContent(obj,opts);
}
else {
event.stopPropagation();
}
});
$.fn.scrollPagination.loadContent(obj,opts);
};
$.fn.scrollPagination.defaults = {
'contentPage' : null,'contentData' : {},'beforeLoad': null,'afterLoad': null,'scrollTarget': null,'heightOffset': 0
};
})( jQuery );
index.html:
内容开始