EasyPageNavigation – 轻松创建页码导航

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

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

使用示例:

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

const EasyPageNav = require('easy-page-navigation');

let MyNav = new EasyPageNav(128, 10, 5);
console.log( MyNav.getNavInfo(6) );

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

{
    pages:[
        { page: 4, isCurrent: false },
        { page: 5, isCurrent: false },
        { page: 6, isCurrent: true },
        { page: 7, isCurrent: false },
        { page: 8, isCurrent: false }
    ],
    havePrevious: true,
    previous: 5,
    haveNext: true,
    next: 7
}

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

<ul>
    <li><a href="/page/1" class="current">1</a></li>
    <li><a href="/page/2">2</a></li>
    <li><a href="/page/3">3</a></li>
    <li><a href="/page/4">4</a></li>
    <li><a href="/page/5">5</a></li>
    <li><a href="/page/2" class="next">2</a></li>
</ul>

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

const options = {
    outerElement: 'ul',
    outerElementClass: '',
    outerElementId: '',

    innerElement: 'li',
    innerElementClass: '',

    linkElement: 'a',
    linkElementClass: '',
    linkTemplate: '/page/{pageNum}',
    linkReplacePattern: /{pageNum}/,

    currentPageClass: 'current',

    nextElement: 'a',
    nextElementClass: 'next',
    nextElementId: '',
    previousElement: 'a',
    previousElementClass: 'previous',
    previousElementId: ''
};

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

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

安装与下载

安装:

npm i --save easy-page-navigation

查看源代码:

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

发表评论

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