###步驟2：挪用mbUploadify
- $('.pagination').pagination({
- total: 100,
- onJump: function(index){
- console.log(index);
- }
- });
複製代碼
https://github.com/hishion/jquery.pagination
##設置裝備擺設項
以下為所有設置裝備擺設項
- $('.pagination').pagination({
- /*總頁數*/
- total: 100,
- /*每頁條數*/
- row: 9,
- /*最大頁碼量,調這個值分頁頁碼數目會變化*/
- num: 2,
- /*當前索引*/
- current: 1,
- /*
- 自界說分頁模板
- first, last, prev, next 請包管 data-index 值正确不然click事務無反映
- item 必須有，其它可選
- */
- template: {
- first:'<li class=\"first\" data-index=\"first\"><a href=\"#\">頁首</a></li>',
- last: '<li class=\"last\" data-index=\"last\"><a href=\"#\">頁尾</a></li>',
- prev: '<li class=\"prev\" data-index=\"prev\"><a href=\"#\">上一頁</a></li>',
- next: '<li class=\"next\" data-index=\"next\"><a href=\"#\">下一頁</a></li>',
- ellipsis: '<li class=\"ellipsis\" data-index=\"ellipsis\"><a>...</a></li>',
- item: '<li class=\"page-{{dataIndex}}\" data-index=\"{{dataIndex}}\"><a href=\"#\">{{index}}</a></li>',
- wrapElement: 'ul'
- },
- /*回調 $.noop.call(this, current, context);*/
- onJump: $.noop
- });
複製代碼
但是上圖還缺了一個按鈕，感覺有點不方便，所以點竄了一下
完成圖
##利用步調
###步調1：引入資源文件
- <div class="pagination"></div>
-
- <!-- mbSlider Javascript file -->
- <script src="jquery.pagination.js"></script>
複製代碼
- .pagination .page-current,
- .pagination .page-current a,
- .pagination .ellipsis,
- .pagination .ellipsis a{
- cursor: default;
- }
網站架設
複製代碼 網站架設
改成
- .pagination .page-current,
- .pagination .page-current a,
- .pagination .ellipsis .nextone,
- .pagination .ellipsis .nextone a{
- cursor: default;
- }
複製代碼
找到jquery.pagination.js
- template: {
- first:'<li class="first" data-index="first"><a href="javascript:;">首页</a></li>',
- last: '<li class="last" data-index="last"><a href="javascript:;">最后一页</a></li>',
- prev: '<li class="prev" data-index="prev"><a href="javascript:;">上一页</a></li>',
- next: '<li class="next" data-index="next"><a href="javascript:;">下一页</a></li>',
- ellipsis: '<li class="ellipsis" data-index="ellipsis"><a href="javascript:;">下一页</a></li>',
- item: '<li class="page-{{dataIndex}}" data-index="{{dataIndex}}"><a href="javascript:;">{{index}}</a></li>',
- wrapElement: 'ul'
- },
複製代碼
next下插足這行，模板 template也加入這行
- nextone: '<li class="nextone" data-index="nextone"><a href="javascript:;">[ DISCUZ_CODE_4 ]lt;/a></li>',
網站架設
複製代碼 網站架設
jquery.pagination.css
完成
本文引用自:
文章定位：
