jQuery下拉滚动条刷新 ajax获取数据

来源：互联网发布：会员系统软件著作权编辑：程序博客网时间：2024/05/18 01:37

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

已经做成了插件

下面是文件 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("<img id='ipq_loading' style='height: 60px; width: 60px; margin: 0 auto; margin-top: -60px; margin-left: 45%' src='http://www.lanrentuku.com/img/allimg/1212/5-121204193R0-50.gif'>");                    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("<div style='height: 500px;background-color: #FF0000;'></div>");//如果想修改 loading的图片，请修改这里        }    }});*/

使用时加上头文件

    <script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>    <script src="js/jquery.bottomScrollLoading.js" type="text/javascript"></script>

之后加上代码

$(window).bottomScrollLoading({            out:$(document),            ajaxData:{                url: "test5.html",                success:function(ret){                    //alert(ret);                    $("#content").append("<div style='height: 500px;background-color: #FF0000;'></div>");                }            }        });

放上我的 demo页面好了

<!DOCTYPE=html><html><head>    <script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>    <script src="js/jquery.bottomScrollLoading.js" type="text/javascript"></script>    <script type="text/javascript">        $(window).bottomScrollLoading({            out:$(document),            ajaxData:{                url: "test5.html",  //就是ajax时用的地址                success:function(ret){                    //alert(ret);                    $("#content").append("<div style='height: 500px;background-color: #FF0000;'></div>");                }            }        });    </script></head><body><div id="content" style="height:960px">    <div id="follow">this is a scroll test;<br/>    页面下拉自动加载内容</div>    <div style='border:1px solid tomato;margin-top:20px;color:#ac1;height:800' >hello world test DIV</div></div></body></html>

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

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

第一次做jQuery插件。。

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

附送一个demo.zip 来演示 demo

hlyblog.net

0 0