快捷導(dǎo)航

jQuery插件分享之分頁(yè)插件jqPagination

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

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

使用方法：

添加 jQuery 類庫(kù)、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)前頁(yè) 默認(rèn)為1
  max_page : 40, //設(shè)置最大頁(yè) 默認(rèn)為1
  page_string : '當(dāng)前第{current_page}頁(yè),共{max_page}頁(yè)',
  paged : function(page) {
      //回發(fā)事件。。。
      }
});

您可能感興趣的文章:

相關(guān)文章

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