EasyPageNavigation – 轻松创建页码导航

EasyPageNavigation 是一个可以快速生成页码导航的 NPM 模块,既可以用在后端,也可以用在前端,用在前端时需要配合 Browserify "食用"

最初考虑到这个功能并不复杂,是打算放到 Gist 上面分享给大家的,但是考虑到这样的功能还是比较常用的,以及 Don't repeat yourself 的理念,还是整理了一下并发布了出来。

使用示例:

首先需要使用 "npm i --save easy-page-navigation" 安装,然后:

上面这段代码使用了 getNavInfo(currentPage) 方法直接获取页码导航的信息,数据类型为 Object,可以自己使用 JSON.stringify() 转换为 JSON

如果你不希望拿到这样的数据,也可以通过 getNavHTML(currentPage, options) 直接获取 HTML 代码,获取到的代码如下:

这段示例代码是将当前页面设置为第一页时获取的,所以导航中并没有上一页按钮,这里几乎所有的部分都可以在 options 参数中进行设置,具体可用的设置有:

你也可以在选项中把 outerElement 或是 innerElement 设置为空的字符串,或是 null 来达到去掉外层包裹元素的目的,也可以指定 linkTemplate 和 linkReplacePattern 来自行设定链接模板。

虽然这些地方都可以进行自定义,但是你不能把 linkElement 设置为一个无效的属性,否则它会被忽略并且使用默认的 a 标签进行渲染

安装与下载

安装:

npm i --save easy-page-navigation

查看源代码:

https://github.com/Meeeeow/easy-page-navigation

发表评论

电子邮件地址不会被公开。 必填项已用*标注