page-navigator

查看例子

在线 Demo

git clone [email protected]:meowtec/page-navigator.git
cd page-navigator

PageNavigator有js/php/python三种版本，有三个例子文件 (example.) html/php/py 分别与之对应。 你可以通过直接在浏览器中打开example.html，或者在项目目录下运行example.py后打开生成文件，或者把pagenavigator.php和example.php放在php的服务器目录下并访问example.php来运行这三个样例。

pagenavigator.js可以直接通过<script>标签在浏览器中引入，也可以使用require.js/sea.js等工具加载，也可以在nodejs中使用。

使用

初始化

var nav = new PageNavigator()

生成导航

var html = nav.create(currentPage, maxPage) // html 字符串

• currentPage: 当前页, number
• maxPage: 总页数, number

返回值html为生成的导航 html 源码，格式类似于：

<a>上一页</a><a>1</a><a>2</a><a>下一页</a>

如果你喜欢用<li>做导航，你也可以自定义helper来使用<li>取代<a>。

设置

PageNavigator(setting)在初始化时可以传入一个设置参数setting，类型为Object:

var nav2 = new PageNavigator({
  linkHelper: 'list.html?page={{page}}&from={{current}}&max={{max}}',
  prevText: '←',
  nextText: '→',
  moreText: '……',
  size: 9,
})

自定义 helper

默认的导航以<span>和<a>标签组成，假设我们要将显示数字的节点换成<button>标签，在 setting 中添加numberHelper和currentHelper:

var nav3 = new PageNavigator({
  numberHelper: '<button href="{{link}}" class="item number" data-page="{{page}}">{{page}}</button>',
  currentHelper: '<button class="item number current" data-page="{{page}}" disabled="disabled">{{page}}</button>'
})

可定义的 helper 列表请查看源代码。