快捷導(dǎo)航

超好用的jQuery分頁插件jpaginate用法示例【附源碼下載】

更新時(shí)間：2018年12月06日 12:01:23 作者：gaohj

這篇文章主要介紹了超好用的jQuery分頁插件jpaginate用法,結(jié)合實(shí)例形式簡(jiǎn)單分析了jQuery分頁插件jpaginate的基本調(diào)用方式、參數(shù)屬性及配置方法,并附帶源碼供讀者下載,需要的朋友可以參考下

本文實(shí)例講述了jQuery分頁插件jpaginate用法。分享給大家供大家參考，具體如下：

jpaginate是一個(gè)自帶滑動(dòng)動(dòng)畫效果的jQuery分頁插件，用戶可以通過單擊或只是懸停在箭頭上的使頁碼滑動(dòng)顯示。

你可以用下面的方式調(diào)用插件：

$(elementID).paginate()

您可以通過一下屬性來配置插件：

count：頁面總數(shù)
start：默認(rèn)選中頁碼
display：可見頁碼數(shù)量
border：邊框（true/false）
border_color：邊框顏色：
text_color：文本的顏色/號(hào)碼
background_color：背景顏色
border_hover_color：邊框懸停時(shí)顏色
text_hover_color：文本懸停時(shí)顏色
background_hover_color：背景懸停時(shí)顏色
images：箭頭的背景圖片（true/false）
mouse：鼠標(biāo)拿下的動(dòng)畫效果（press/slide）
onChange：當(dāng)點(diǎn)擊一個(gè)網(wǎng)頁。作為參數(shù)，單擊“單擊”的頁面的數(shù)目可以被使用。

來個(gè)直接點(diǎn)的代碼，更容易看。

$("#pagination0").paginate({
  count         : 50,
  start         : 1,
  display         : 7,
  border      : false,
  text_color     : '#888',
  background_color    : '#EEE',
  text_hover_color   : 'black',
  background_hover_color  : '#CFCFCF',
  rotate       : true,
  images      : false,
    mouse      : 'press',
  onChange       : function(page){
          list(page-1,pageSize);
          }
});

官方示例的分頁顯示運(yùn)行效果如下：

jpaginate插件源碼可點(diǎn)擊此處本站下載。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery擴(kuò)展技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery常見經(jīng)典特效匯總》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery調(diào)用RESTful WCF示例代碼(GET方法/POST方法)
本篇文章主要介紹了jQuery調(diào)用RESTful WCF示例代碼(GET方法/POST方法)，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-01-01
jQuery事件對(duì)象總結(jié)
事件是腳本編程的靈魂,本篇來介紹jQuery中的事件處理及事件對(duì)象.這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下。
2016-10-10
jquery簡(jiǎn)單倒計(jì)時(shí)實(shí)現(xiàn)方法
這篇文章主要介紹了jquery簡(jiǎn)單倒計(jì)時(shí)實(shí)現(xiàn)方法,涉及jQuery定時(shí)函數(shù)操作及日期與實(shí)現(xiàn)的運(yùn)算技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-12-12
使用jQuery實(shí)現(xiàn)的網(wǎng)頁版的個(gè)人簡(jiǎn)歷(可換膚)
點(diǎn)擊姓名會(huì)顯示她的基本詳細(xì)信息，點(diǎn)擊切換皮膚，會(huì)更改皮膚和字體大小感興趣的朋友可以參考下本文如何使用jQuery實(shí)現(xiàn)的網(wǎng)頁版的個(gè)人簡(jiǎn)歷
2013-04-04
jQuery中Ajax的load方法詳解
本文重點(diǎn)個(gè)大家講解了幾個(gè)jQuery中ajax的load()方法的使用實(shí)例，load()方法是jQuery中最為簡(jiǎn)單和常用的Ajax方法，能遠(yuǎn)程載入HTML代碼并插入DOM中
2015-01-01
jquery實(shí)現(xiàn)頁面百葉窗走馬燈式翻滾顯示效果的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)頁面百葉窗走馬燈式翻滾顯示效果的方法,實(shí)例分析了jQuery操作百葉窗翻滾效果的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
基于jquery 的一個(gè)progressbar widge
這個(gè)widget是包含在wijmo 項(xiàng)目中的一個(gè)widget。目前此widget已經(jīng)開源基于mit和gpl雙協(xié)議，目前是beta版，可能存在bug。
2010-10-10
Spring shiro + bootstrap + jquery.validate 實(shí)現(xiàn)登錄、注冊(cè)功能
這篇文章主要介紹了Spring shiro + bootstrap + jquery.validate 實(shí)現(xiàn)登錄、注冊(cè)功能,需要的朋友可以參考下
2017-06-06
JQuery表格內(nèi)容過濾的實(shí)現(xiàn)方法
使用JQuery 實(shí)現(xiàn)一個(gè)表格內(nèi)容過濾的功能，有需要的朋友可以參考一下，代碼如下：
2013-07-07
jQuery實(shí)現(xiàn)美觀的多級(jí)動(dòng)畫效果菜單代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)多級(jí)動(dòng)畫效果菜單代碼,涉及jquery針對(duì)頁面元素的遍歷及事件綁定操作頁面元素樣式變換的技巧,界面美觀實(shí)用,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09