asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012-03-14 00:00
921 查看
自从腾讯微博上线以来,基本上就开始用了,一直到现在,作为一个开发人员,也看到了腾讯微博一直在不停的改变,也不知道大家有没有发现,腾讯微博提供两种加载数据的方式,一种是分页,一种是滚动浏览器滚动条加载数据,分页功能我想大家都做得太多了,今天我与大家分享一下我用滚动条滚动加载数据
下面开讲:
首先说一下思路,我用的是Jquery,然后通过Jquery的ajax()方法通过 HTTP 请求加载远程数据来实现的,用到Jquery,首先要应用jquery.min.js类库,如果本地没有,也可以直接引用下面地址<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>。
好吧,下面我们看下核心代码:
这是前台js代码,下面我稍微的解释一下代码:count是定义的数据总数,定义两个div,一的div用来追加数据,一个div用来判断滚动条的位置,再建一个*.ashx文件用来处理程序并返回相应的数据,根据此数据我们肯定判断加载情况,滚动追加完成后我还多加了一个"点击加载更多的功能...",此功能实现也与上面差不多...代码都在上面,供大家参考。
注意:为了防止滚动事件一直会被执行,所以才定义了一个loaded来控制滚动事件的执行。
下面开讲:
首先说一下思路,我用的是Jquery,然后通过Jquery的ajax()方法通过 HTTP 请求加载远程数据来实现的,用到Jquery,首先要应用jquery.min.js类库,如果本地没有,也可以直接引用下面地址<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>。
好吧,下面我们看下核心代码:
// - -!,你懂的. var count=<%=allcount %>; var times=0; var loaded = true; function Add_Data() { var top = $("#main_left_add").offset().top; if(loaded && ($(window).scrollTop() + $(window).height() > top)) { $("#main_left_add").html("数据加载中..."); times++; $.ajax( { type: "POST", dataType: "text", url: "weibo.ashx", data: "userid="+<%=hf.Value %>+"&touserid="+<%=hf1.Value %>+"&count="+count+"×="+times+"&type=1", success: function(data) { //alert("第"+times+"次追加数据."); if(data == "没有数据") { $("#main_left_add").css("display","none"); loaded=false; AddEffect(); } else if(data == "") { $("#main_left_add").html("点击加载更多..."); $("#main_left_add").css("display","block"); loaded=false; AddEffect(); } else if(data != "") { $("#main_left_down").append(data); AddEffect(); } } } ); } } $(window).scroll(Add_Data); //点击追加数据 $("#main_left_add").click(function(){ $.ajax({ type: "POST", dataType: "text", url: "weibo.ashx", data:"userid="+<%=hf.Value %>+"&touserid="+<%=hf1.Value %>+"&count="+count+"×="+times+"&type=2", success: function(data){ if(data=="没有数据") { $("#main_left_add").css("display","none"); AddEffect(); } else { $("#main_left_down").append(data); $("#main_left_add").html("点击加载更多..."); AddEffect(); } } }); //鼠标移动效果 $("#main_left_add").mouseover(function(){ $(this).css("background-color","#e4eef8"); }); $("#main_left_add").mouseout(function(){ $(this).css("background-color","#f0f5f8"); });
这是前台js代码,下面我稍微的解释一下代码:count是定义的数据总数,定义两个div,一的div用来追加数据,一个div用来判断滚动条的位置,再建一个*.ashx文件用来处理程序并返回相应的数据,根据此数据我们肯定判断加载情况,滚动追加完成后我还多加了一个"点击加载更多的功能...",此功能实现也与上面差不多...代码都在上面,供大家参考。
注意:为了防止滚动事件一直会被执行,所以才定义了一个loaded来控制滚动事件的执行。
相关文章推荐
- asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
- asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
- asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
- 用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博) [复制链接]
- jquery实现浏览器滚动条往下时自动加载数据
- JQuery实现浏览器的滚动条滚动到底部后加载数据
- JQuery实现浏览器的滚动条滚动到底部后加载数据
- asp.net开发中利用jquery来实现滚动下拉标题浮动固定显示
- dhl:asp.net mvc下用jQuery通过AJAX 实现HTTP 请求加载远程数据
- jquery实现浏览器滚动条往下时自动加载数据
- Jquery zTree结合Asp.net实现异步加载数据
- Asp.net 2.0 自定义控件开发[实现GridView多行表头固定表体滚动效果][示例代码下载]
- jQuery Asp.Net datagrid 表头固定 表内容滚动代码实现
- Asp.net使用JQuery实现评论的无刷新分页及分段延迟加载效果
- asp.net 动态数据网站简单应用,快速建立站点实现对库方便的增删改
- Asp.net 2.0 自定义控件开发[实现GridView多行表头固定表体滚动效果][示例代码下载]
- jquery实现滚动时加载数据
- ASP.NET网站权限设计实现(三)——套用JQuery EasyUI列表显示数据、分页、查询
- ASP.NET使用EasyUI-DataGrid + ashx + JQuery Ajax:实现数据的增删查改,查询和分页!
- jquery 数据分批加载 asp.net