比较全面的php分页导航类

先说说网页为什么要分页:

1,用户体验考虑

    使用户集中注意力浏览当前页面内容,而不是给出十几屏数据,时浏览者无所适从,产生压迫感、厌倦感、焦虑感;分页使页面短小(完全可以把内容限制在一屏大小的面积内),容易布局,也增强了浏览者视觉感受。也是因为页面短小,所以加载快速。

2,技术原因

最早促使页面分页的原因,主要是技术原因。因为服务器和网速都非常慢,所以需要一种办法,使服务器的负载与网络的负担都能达到一种间歇的分布的平衡,还考虑到杜绝浏览者无意识地下载冗余信息。分页使大批量的数据(主要是表里的记录),按固定的单位(页)下载到浏览者的机器,浏览者在浏览页面的间隙,服务器和网络资源得以间断的释放,可以为别的 浏览者服务。这种方式可以基本满足大多数浏览者的需求,有效地缓解了互联网资源的压力。当然,直到现在,这种压力似乎永远没有减小的迹象,而且相反,压力 越来越大了。谁要人是一头贪婪的动物呢?分页技术虽然很有效,成了动态网页的标配技术,但用久了,难免产生审美疲劳。

 

瀑布流分页当浏览者浏览了当前页面内容后,向下拉动浏览器滚动条,本来还在服务器上的内容,会根据滚动条的拖动,动态地从服务器上按一定的单位(类似分页)下载下来。这样还带来了一个好处,就是以前已经浏览过的内容,还在浏览器当前窗口的上部(可以理解为被缓存了),要再次浏览的话,直接向上拖动滚动条或转动鼠标 滚轮即可。而采用分页技术的话,要查看先前的内容,必需再次点击鼠标(比如“上一页”等),再次请求服务器端的页面(假设没有采用缓存技术的),再次等待 页面数据的下载和呈现 。实现这种浏览效果,可以改善用户体验(最起码有新鲜感),编程技术也不难,采用 Ajax 技术是一种绝好的解决方案之一。希望更好的用户体验被大家创造出来。

 

分页存储过程http://hudeyong926.iteye.com/blog/764703

Java代码  比较全面的php分页导航类
  1. $(function () {  
  2.     var scrollTimer;  
  3.     var page = 0;  
  4.     jsonScrollPageData(0);//默认加第一页  
  5.   
  6.     //下面滚动取第二页++  
  7.     $(window).on('scroll', function () { //页面出现滚动条生效,即滚动事件  
  8.         if (scrollTimer) {  
  9.             clearTimeout(scrollTimer);  
  10.             scrollTimer = null;  
  11.         }  
  12.         scrollTimer = setTimeout(function () {  
  13.             jsonScrollPageData($(this).scrollTop());  
  14.         }, 200);//0.2s  
  15.     });  
  16. });  
  17.   
  18. function jsonScrollPageData(position) {  
  19.     var offsetHeight = 44;  
  20.     var viewportHeight = $(window).height();  
  21.     var bodyHeight = $('body').height();  
  22.   
  23.     if ((bodyHeight <= position + viewportHeight + offsetHeight) && page >= 0) {  
  24.         $.ajax({  
  25.             type: 'GET',  
  26.             url: url + "?t=" + Math.random(),  
  27.             data: {page: ++page},  
  28.             async: false,  
  29.             dataType: 'JSON',  
  30.             success: function (jsonData) {  
  31.                 if (jsonData.length > 0) {  
  32.   
  33.                 } else { //已全部显示  
  34.                     page = -1;  
  35.                 }  
  36.             }  
  37.         });  
  38.     }  
  39. }  

GET方式分页:

布局在页面左边的:
比较全面的php分页导航类
比较全面的php分页导航类
 
比较全面的php分页导航类

布局在页面中间的


比较全面的php分页导航类
 
比较全面的php分页导航类
 
比较全面的php分页导航类
比较全面的php分页导航类
比较全面的php分页导航类
 
比较全面的php分页导航类
 
比较全面的php分页导航类
 
比较全面的php分页导航类
 
比较全面的php分页导航类
 
比较全面的php分页导航类
 
比较全面的php分页导航类
 
比较全面的php分页导航类
比较全面的php分页导航类

布局在页面的右边
比较全面的php分页导航类
 
比较全面的php分页导航类

上一篇:《树莓派渗透测试实战》——2.8 SSH默认私钥和管理


下一篇:WebView点击加载的页面中的按钮时不弹出新窗口以及在加载后执行javascript