下拉无法刷新Ajax页面,jQuery下拉滚动条刷新 ajax获取数据

效果就是看百度图片的时候，滚动条拉到底部，将会出现动态刷新的图样。

已经做成了插件

下面是文件 jquery.bottomScrollLoading.js 中的代码

/**

* Created by ipqhjjybj on 14-3-7.

*/

;(function($){

var $bottomScrollLoading;

$.fn.bottomScrollLoading = function(settings){

return this.each(function(){

$bottomScrollLoading.init($(this), settings);

});

};

$bottomScrollLoading = $.bottomScrollLoading = {

init: function(outer, settings){

this.appendTo = settings.appendTo | $("body");

this.outer = outer; //这是滚动的视图

this.range = settings.range || -700; //距下边界长度/单位px

this.maxnum = settings.maxnum || 20; //设置加载最多次数

this.ajaxData = settings.ajaxData || {};

this.isLoading = false;

this.num = 1;

if ('undefined' === typeof this.ajaxData.dataType || !$.inArray(this.ajaxData.dataType, ('html', 'json'))) {

this.ajaxData.dataType = 'html';

}

this.tmp_success = this.ajaxData.success;

this.ajaxData.success = function(ret){

sl = $bottomScrollLoading;

sl.isLoading = false;

$("#ipq_loading").remove();

if('function' === typeof sl.tmp_success){

sl.tmp_success(ret);

}

}

$(this.outer).scroll(function(){

var sl = $bottomScrollLoading;

var scrollPos = $(this).scrollTop();

var totalHeight = parseFloat($(sl.outer).height()) + parseFloat(scrollPos);

if( (false === sl.isLoading) && ( $(document).height()-sl.range) <= totalHeight && sl.num <= sl.maxnum){

sl.isLoading = true;

$("#content").append("

");

sl.sendRequest();

sl.num = sl.num + 1;

}

});

},

sendRequest:function(){

$.ajax(this.ajaxData);

}

}

})(jQuery);

/*

how to use it

$(window).bottomScrollLoading({

out:$(document),

ajaxData:{

url: "test5.html",

success:function(ret){

alert(ret);

$("#content").append("

");//如果想修改 loading的图片，请修改这里

}

}

});

*/

使用时加上头文件

之后加上代码

$(window).bottomScrollLoading({

out:$(document),

ajaxData:{

url: "test5.html",

success:function(ret){

//alert(ret);

$("#content").append("

");

}

}

});

放上我的 demo页面好了

html>

this is a scroll test;

页面下拉自动加载内容

hello world test DIV

制作这个插件的时候，参考了 http://blog.csdn.net/saindy5828/article/details/7756315这里的代码

如果对加载时的loading图片不满意的。可以去修改  jquery.bottomScrollLoading.js  中的 $(body)附加的图片部分。。

第一次做jQuery插件。。

看来js水平进步了很多。。

附送一个demo.zip 来演示 demo

hlyblog.net