分页导航生成器:page-navigator
jopen
10年前
分页导航生成器:page-navigator。
查看例子
git clone git@github.com: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>' })