快捷導(dǎo)航

jQuery插件分享之分頁插件jqPagination

更新時間：2014年06月06日 11:31:04 作者：

jqPagination 是一個簡單易用的輕量級 jQuery分頁插件，其使用了 HTML5 和 CSS3 技術(shù)來實現(xiàn)。此插件提供了幾個參數(shù)設(shè)置選項，通過簡單的配置即可生成分頁控件。此外，它的外觀樣式是可自定義的，擴展性很強。

使用方法：

添加 jQuery 類庫、jqPagination 插件的 JS 和 CSS 文件

復(fù)制代碼代碼如下:

<link rel="stylesheet" href="jqpagination.css"/>
<script src="jquery-1.6.2.min.js"></script>
<script src="jquery.jqpagination.min.js"></script>

再需要如下HTML

復(fù)制代碼代碼如下:

<div class="pagination">
  <a href="#" class="first" data-action="first">&laquo;</a>
  <a href="#" class="previous" data-action="previous">&lsaquo;</a>
  <input type="text" readonly="readonly" data-max-page="40" />
  <a href="#" class="next" data-action="next">&rsaquo;</a>
  <a href="#" class="last" data-action="last">&raquo;</a>
</div>

最后初始化插件

復(fù)制代碼代碼如下:

$('.pagination').jqPagination({
  link_string : '/?page={page_number}',
  current_page: 5, //設(shè)置當(dāng)前頁 默認(rèn)為1
  max_page : 40, //設(shè)置最大頁 默認(rèn)為1
  page_string : '當(dāng)前第{current_page}頁,共{max_page}頁',
  paged : function(page) {
      //回發(fā)事件。。。
      }
});

您可能感興趣的文章:

相關(guān)文章

JQuery入門——事件切換之toggle()方法應(yīng)用介紹
在toggle()方法中，可以依次調(diào)用N個指定的函數(shù)，直到最后一個函數(shù)，然后重復(fù)對這個函數(shù)輪番調(diào)用,在函數(shù)之間切換調(diào)用的時候相當(dāng)?shù)姆奖?接下來將會詳細介紹toggle()方法的使用，感興趣的你可不要錯過了啊
2013-02-02
輪播的簡單實現(xiàn)方法
下面小編就為大家?guī)硪黄啿サ暮唵螌崿F(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-07-07
jquery實現(xiàn)帶縮略圖的全屏圖片畫廊效果實例
這篇文章主要介紹了jquery實現(xiàn)帶縮略圖的全屏圖片畫廊效果,實例分析了jquery帶縮略圖的全屏效果圖片實現(xiàn)技巧,并附有完整的源碼下載,需要的朋友可以參考下
2015-06-06
JQuery 進入頁面默認(rèn)給已賦值的復(fù)選框打鉤
這篇文章主要介紹了JQuery 進入頁面默認(rèn)給已賦值的復(fù)選框打鉤的實現(xiàn)代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2017-03-03
jQuery的Read()方法代替原生JS詳解
眾所周知在jQuery中ready方法在DOM完全下載后立即執(zhí)行其中的代碼。因為它是等所有的DOM元素都加載完畢，才執(zhí)行給定的函數(shù)，所以你能確定那些試圖操作和訪問元素節(jié)點的方法都能被執(zhí)行。而這篇文章給大家介紹的是如何用jQuery的Read()方法代替原生JS，下面來一起看看。
2016-11-11
jquery延遲加載外部js實現(xiàn)代碼
為了提高加載速度，有個想法就是推遲外部JS加載，有興趣的朋友可以參考下，接下來詳細介紹實現(xiàn)方法
2013-01-01
7款吸引人眼球的jQuery/CSS3特效實例分享
jQuery和CSS3對于web前端開發(fā)肯定用得也比較多，接下來分享一些由jQuery和CSS3制作成的特效，希望對哪些喜歡學(xué)習(xí)特效的朋友有所幫助
2013-04-04
淺談jquery頁面初始化的4種方式
本文介紹了Jquery頁面初始化的4種方式的實例代碼，需要的朋友可以看下
2016-11-11
隨鼠標(biāo)上下滾動的jquery代碼
隨鼠標(biāo)上下滾動，在某些時候需要類似的效果，下面有個不錯的示例可以實現(xiàn)此效果，需要的朋友可以參考下
2013-12-12
jquery mobile事件多次綁定示例代碼
這種綁定方法會在整個document每pageinit一次,就對xxx進行的某一事件進行綁定,而pageinit事件什么時候會觸發(fā)，感興趣的朋友可以了解下
2013-09-09