分頁導航生成器：page-navigator

 分頁導航生成器：page-navigator。

查看例子

在線 Demo

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>'
})

可定義的 helper 列表請查看源代碼。

項目主頁：http://www.baiduhome.net/lib/view/home/1421029117343