首页 > jQuery > google reader滚动动态加载数据实现方式
2010十月1

google reader滚动动态加载数据实现方式

enjoyasp.net jQuery 评论关闭
0,页面引用jquery及插件jquery-1.2.6.pack.js,jquery.dimensions.pack.js  详细效果见BRM系统--发展部跟进

1,为承载数据的div增加onscroll事件:
2,在AddMoreData()方法中判断滚动条是否到达底部,若是,则异步传输数据 function AddMoreData(){ var myDiv = $("#dvBody")[0]; // alert( $("#dvBody")[0]); if ( myDiv.scrollTop + myDiv.style.pixelHeight > myDiv.scrollHeight ){ lastPostFunc(); //异步加载数据 } } var hasReturn = true; //指示当目前异步请求返回之后才可以进行下一次的异步传输,不然可能会出现数据不一致的情况 3, function lastPostFunc() { if ( ! hasReturn ) return; hasReturn = false; //开始本次传输 //传输查询条件 var queryStr = document.location.search; //因要获取上次滚动所达元素,以便在数据中取出此记录以下的数据,故须要在页面中用一hidden元素存起每次的最后的记录ID,并传给查询数据内 var url = "data.aspx" + queryStr + "&lastID=" + $("#LastID").val() + "&sn="+$(".sn:last").attr("id"); url = url + "&txtCustomerName=" + $("#txtCustomerName").val(); url = url + "&txtTel=" + $("#txtTel").val(); url = url + "&ddlCustomerTypeSelectedValue=" + $("#ddlCustomerType").val(); url = url + "&ddlCommunicateStatusSelectedValue=" + $("#ddlCommunicateStatus").val(); url = url + "&txtOrderDate_begin=" + $("#txtOrderDate_begin").val(); url = url + "&txtOrderDate_end=" + $("#txtOrderDate_end").val(); //alert(url); $('div#lastPostsLoader').html(''); //用id为lastPostsLoader的div加载等待图片 $.post(url, function(data){ //alert($(".wrdLatest:last").attr("id")); if (data != "") { $(".wrdLatest1:last").after(data); //回调函数,将查询到的新数量加到:class为wrdLatest1的集合的最后一个元素之后,故在得到的数据中要生//成classclass为wrdLatest1的元素,以定位最后一个。 } $('div#lastPostsLoader').empty(); hasReturn = true; //本次传输完毕,可以进行下一次异步传输 }); };

本文地址:http://enjoyasp.net/?p=936 , 转载请保留.

本文的评论功能被关闭了.