一直比较懒,博客好几个月没更新了。
最近做了一个项目,页面是瀑布流布局,本来是做成有分页的形式,觉的这种搭配有点不伦不类,呵呵,个人觉的,最后,那种分页形式,让我替换成了无刷新滚屏加载数据形式。哈哈,视觉效果,明显大增。
我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载技术。我们发现很多网站用到这种技术,必应图片搜索、新浪微博、QQ空间等将该技术应用得淋漓尽致。不废话了,直接介绍吧
滚屏加载技术,是使用javascript监听滚动条的位置,没一次滚动条到达浏览器窗口底部时,触发一个ajax请求后台API,返回相应的数据,并将数据绑定且追加到页面的底部,从而实现动态加载数据,其实这就是一个典型的ajax应用。
页面数据的绑定形式:Index.cshtml
我页面中默认显示10条数据,因此,我们先从数据库取开始的10条数据显示在页面。后面新加载的数据,我们也按每次10条的方式展示。
kendo tempalte 数据绑定方式:
<div class="model " id="test" style="display: none" data-template="healthList" data-bind="source:models.Results"> </div> <script type="text/x-kendo-template" id="healthList"> <div class="grid list"> <div class="imgholder"> <a href="/Jkb/DetailIndex/${ID}" target="_bank"> <img class="lazy" src="/images/test/pixel.gif" data-original="@_imgHttpUrl${Image}" width="175" /> </a> </div> <strong>${Title}</strong> <p class="descp">${Description}</p> <p style="color: rgb(153, 153, 153); margin-top: 10px; margin-bottom: 7px;">${FavoriteCount} 收藏 ${CommentCount} 评论</p> </div> </script>
Jquery ajax 获取数据格式
var i = 1; //设置当前页数 $(window).scroll(function () { // 当滚动到最底部以上50像素时,加载新内容 var vlida = false; if ($(document).height() - $(this).scrollTop() - $(this).height() < 50 && !vlida) { $.ajax({ type: "GET", url: "/api/JkbList?pageIndex=" + i + "&barClassId=" + barClassId, dataType: "json", success: function (msg) { if (msg.Count > 0) { var viewModel = { models: kendo.observable(msg), page: kendo.observable(msg) }; var vm1 = $(".model"); kendo.bind(vm1, viewModel); $('#container').append($("#test").html());//把加载的数据追加到页面的底部 //瀑布流布局,定义样式 $('#container').BlocksIt({ numOfCol: 5, offsetX: 8, offsetY: 8 }); $("img.lazy").lazyload(); i++; } else { $(".nodata").show().html("别滚动了,已经到底了。。。"); vlida = !vlida; return false; } //jquery 限制字符数 $("#wrapper .grid.list .descp").each(function () { var maxwith = 60; if ($(this).text().length > maxwith) { $(this).text($(this).text().substring(0, maxwith)); $(this).html($(this).html() + '...'); } }); } }); } });
API的数据格式:
数据是在存储过程里分页:
ALTER PROCEDURE [dbo].[UP_Web_healthBarWorkCommentGetAll] @WorkID int=null, @TotalRecordCount INT OUTPUT, @PageIndex INT, @PageSize INT AS BEGIN SET NOCOUNT ON; IF @PageIndex<=0 SET @PageIndex=1 IF @PageSize<=0 SET @PageSize=6 -- Insert statements for procedure here SELECT WorkID,CommentDescription,CreateDateTime, UserID AS UserID,HeadImage,Name,Mobile, REPLACE(Phone,SUBSTRING(Phone,4,5),'***') AS Phone FROM (SELECT hbw.WorkID,hbw.CommentDescription,hbw.CreateDateTime, us.ID AS UserID,us.HeadImage,us.Name,us.Mobile, REPLACE(us.Mobile,SUBSTRING(us.Mobile,4,5),'***') AS Phone, ROW_NUMBER()OVER (ORDER BY hbw.ID DESC) AS RowNumber FROM dbo.HealthBarWorksComment AS hbw INNER JOIN dbo.Users AS us ON us.ID=hbw.UserID where hbw.WorkID=@WorkID) AS b WHERE RowNumber BETWEEN CAST(((@PageIndex - 1)* @PageSize+1) AS VARCHAR) AND CAST((@PageIndex * @PageSize) AS VARCHAR)--对数据进行分页 SET @TotalRecordCount=(SELECT COUNT(ID) FROM dbo.HealthBarWorksComment WHERE WorkID=@WorkID) END
好了,本文的介绍到此结束,记录一下,自己的行踪。
相关推荐
无刷新功能我们用到很多很多的,下面我就来给各位介绍一个实例,就是实现php+ajax实现无刷新滚屏加载数据,例子非常的简单大家只要按流程来操作就可以了哦。
这种技术我暂且称它为jQuery+Ajax无刷新滚屏加载技术。我们发现图片搜索、新浪微博、QQ空间等将该技术应用得淋漓尽致。 若是想看该网页特效教程 http://www.sucaihuo.com/js/9.html,滚动条下拉到最后,还可以查看...
主要介绍了PHP+jQuery实现滚屏无刷新动态加载数据功能,涉及php动态读取数据库及加载数据实现滚屏无刷新效果的具体操作技巧,需要的朋友可以参考下
无刷新动态加载数据,滚屏加载更多数据,适合评论等页面,具体实现如下,感兴趣的朋友可以参考下
允许接收区在接收到的数据后添加回车字符(CRLF),便于观察数据。 16).可将Terminal模式下接收到的数据按照十六进制文本方式导出到文件或剪贴板。 17).允许保存程序环境变量。 18).定义热键,方便操作。 19).国际版,...
为List的项编辑器添加格式化和验证数据 5.10节.跟踪TileList中所有被选中的子节点 5.11节.使用和显示项渲染器的NULL项 5.12节.为List创建右键菜单 5.13节.自定义List被选中项的外观 第六章. DataGrid和高级DataGrid...
[2009.1.1] Ver 3.2.26 ...申请了签名证书(在大多数NOKIA、SE手机上有效),请通过jad安装,没有数据线的请用手机访问http://www.ismyway.com/anyview.asp在线安装进行安装(请把读取用户数据/写入用户数据改为从不...
实例064 将数组中的数据添加到下拉菜单中 107 实例065 应用下拉菜单选择所要联机的网站 108 实例066 多级级联菜单 110 实例067 可以输入文字的下拉菜单 111 实例068 根据下拉菜单的值显示不同控件 112 实例069 分级...
4. 人机交互数据输入界面十分干净清爽,我们坚信这是一流的设计思想。 5. 所有信息内容在线完成编辑,就象WORD一样简单、可视而又功能完善,几乎能完成你想要的所有效果。 6. 任意设置的会员级别和浏览权限精确到...
可以使用左右方向键进行翻页, 使用上下方向键进行滚屏. [超级截图] 为气泡添加了白色背景. 文字框可以拖动. 放大镜坐标改成截图尺寸. 傲游3.1.2.1000正式版重要更新: 英文拼写检查 英文拼写检查可以在你输入过程...
收藏夹: MyIE具有和IE一致的添加到收藏夹,组织收藏夹,导出/导入收藏夹。 打开本层链接:收藏夹菜单中每级都有一项打开本层链接的菜单。 使用它可以打开这一层收藏夹的所有链接。 打开所有链接:链接栏上的...
16_1.htm 无刷新实现图片切换。 16_2.htm 很酷的导航特效。 16_3.htm 加载一个文本文件到一个HTML元素中。 16_4.htm 使用XML HTTP载入一个XML文件。 16_5.htm 通过XML HTTP做一个HEAD的请求。 16_6.htm ...
16_1.htm 无刷新实现图片切换。 16_2.htm 很酷的导航特效。 16_3.htm 加载一个文本文件到一个HTML元素中。 16_4.htm 使用XML HTTP载入一个XML文件。 16_5.htm 通过XML HTTP做一个HEAD的请求。 16_6.htm ...
所有前台提交表单防刷新处理,有效过滤垃圾信息提交。此系统是基于ASP+access技术开发的电子商务平台,运行安全,稳定,快速,全自动化、全智能的在线方式管理、维护、更新的企业网站管理系统。提供下载的整站,程序源码...
4. 在网络属性协议中添加协议,选择从软盘安装,将路径指定为多媒体网络教室路由器软件安装路径下的 Drivers 目录,安装完毕后重新启动服务器。 5. 运行组播路由器程序。选择启动按钮,此时应显示启动正常等信息。...