close
水管清洗
完成圖
3.png
##利用步驟
###步驟1：引入資本文件
  1. <div class="pagination"></div>
  2.  
  3. <!-- mbSlider Javascript file -->
  4. <script src="jquery.pagination.js"></script>
複製代碼

 

###步調2：調用mbUploadify
  1. $('.pagination').pagination({
  2.     total: 100,
  3.     onJump: function(index){
  4.         console.log(index);
  5.     }
  6. });
複製代碼

 

##配置項
以下為全部設置裝備擺設項
  1. $('.pagination').pagination({
  2.     /*總頁數*/
  3.     total: 100,
  4.     /*每頁條數*/
  5.     row: 9,
  6.     /*最大頁碼量,調這個值分頁頁碼數量會轉變*/
  7.     num: 2,
  8.     /*當前索引*/
  9.     current: 1,
  10.     /*
  11.         自界說分頁模板
  12.         first, last, prev, next 請包管 data-index 值正确不然click事務無反映
  13.         item 必需有，其它可選
  14.     */
  15.     template: {
  16.         first:'<li class=\"first\" data-index=\"first\"><a href=\"#\">頁首</a></li>',
  17.         last: '<li class=\"last\" data-index=\"last\"><a href=\"#\">頁尾</a></li>',
  18.         prev: '<li class=\"prev\" data-index=\"prev\"><a href=\"#\">上一頁</a></li>',
  19.         next: '<li class=\"next\" data-index=\"next\"><a href=\"#\">下一頁</a></li>',
  20.         ellipsis: '<li class=\"ellipsis\" data-index=\"ellipsis\"><a>...</a></li>',
  21.         item: '<li class=\"page-{{dataIndex}}\" data-index=\"{{dataIndex}}\"><a href=\"#\">{{index}}</a></li>',
  22.         wrapElement: 'ul'
  23.     },
  24.     /*回調 $.noop.call(this, current, context);*/
  25.     onJump: $.noop
  26. });
複製代碼
可是上圖還缺了一個按鈕，感覺有點不輕易，所以點竄了一下

4.png

找到jquery.pagination.js
  1. template: {
  2.                 first:'<li class="first" data-index="first"><a href="javascript:;">首页</a></li>',
  3.                 last: '<li class="last" data-index="last"><a href="javascript:;">最后一页</a></li>',
  4.                 prev: '<li class="prev" data-index="prev"><a href="javascript:;">上一页</a></li>',
  5.                 next: '<li class="next" data-index="next"><a href="javascript:;">下一页</a></li>',
  6.                 ellipsis: '<li class="ellipsis" data-index="ellipsis"><a href="javascript:;">下一页</a></li>',
  7.                 item: '<li class="page-{{dataIndex}}" data-index="{{dataIndex}}"><a href="javascript:;">{{index}}</a></li>',
  8.                 wrapElement: 'ul'
  9.             },
複製代碼
next下插手這行，模板 template也插手這行
  1. nextone: '<li class="nextone" data-index="nextone"><a href="javascript:;">[        DISCUZ_CODE_4        ]lt;/a></li>',
複製代碼
jquery.pagination.css

 

  1. .pagination .page-current,
  2. .pagination .page-current a,
  3. .pagination .ellipsis,
  4. .pagination .ellipsis  a{
  5.     cursor: default;
  6. }
複製代碼
改成
  1. .pagination .page-current,
  2. .pagination .page-current a,
  3. .pagination .ellipsis .nextone,
  4. .pagination .ellipsis .nextone a{
  5.     cursor: default;
  6. }
複製代碼

 

完成


https://github.com/hishion/jquery.pagination

 

 



本文引用自:
arrow
arrow
    文章標籤
    水管清洗
    全站熱搜
    創作者介紹
    創作者 bjornm50o80j 的頭像
    bjornm50o80j

    苗栗水管清洗

    bjornm50o80j 發表在 痞客邦 留言(0) 人氣()