分页栏是网页上最常见不过的一个组件，本博文给出分页栏的一个web2.0标准示例，并作简要分析。本分页栏的界面效果如下图所示： 本分页栏组件具有以下特性： 1、不论当前页码是哪一个，分页栏始终显示第一页的页码和最后一页的页码（如上图所示）。这样，用户不仅可以从最后的页码知道总共有多少页，还能方便地在最后一页和第一页之间导航。 2、使展现的页码个数（省略符也算一个）始终固定，比如固定为9个。如下面两个图所示，当前页码为1或9（或任意其他数字）时，展现的页码个数都为9个。这样，下一页按钮的位置始终保持不变，在做Ajax分页时，用户可以在同一个位置多次点击下一页按钮，而不会因为按钮位置发生变化而得移动鼠标，极大地提高了用户体验。 3、通过接口参数可以方便地设置展现的页码个数。genPaginationHtml()接口的deviation（偏移量）参数用于设置当前页码的左边或右边显示的页码个数。所以，总共展现的页码个数等于2*deviation+1。比如，本示例中设置deviation为4，则总共展现9个页码。 请您动手注释掉本示例以下源码，然后从界面上比较注释前后两者的区别。您还可以比较一下Google的分页行为，您会发现其行为就是注释掉本示例以下代码后的行为。在编写本示例的时候我研究了Google的分页行为，然后再逐步演变扩展。复制代码 代码如下: //使总码数固定 if (curPage - startNum < deviation) { endNum += deviation - (curPage - startNum); endNum = endNum > pagesCount ? pagesCount : endNum; } if (endNum - curPage < deviation) { startNum -= deviation - (endNum - curPage); startNum = startNum < 1 ? 1 : startNum; }; 最后给出genPaginationHtml(rowsCount, pageSize, curPage, toPage, deviation)接口参数说明如下： rowsCount(number)：记录总数。 pageSize(number)：每页显示的记录数。 curPage(number)：当前页页码。 toPage(string)：一个函数名，实现跳到指定页的逻辑。 deviation(number)：当前页码的左边或右边显示的页码个数。 分页栏示例下载

　　推荐阅读

　　js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)

复制代码 代码如下://获得客户端操作系统(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008) function GetOSInfo(){ var _pf = navigator.platform; var appVer = navigator.userAgent; if(_pf == "Win32" || _pf ==>>>详细阅读

本文标题：分页栏的web标准实现

地址：http://www.17bianji.com/kaifa2/JS/23971.html

 1/2    1