page-navigator
v0.1.0page-navigator
查看例子
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>'
})