快捷導(dǎo)航

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

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

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

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

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

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

$(elementID).paginate()

您可以通過(guò)一下屬性來(lái)配置插件：

count：頁(yè)面總數(shù)
start：默認(rèn)選中頁(yè)碼
display：可見(jiàn)頁(yè)碼數(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)頁(yè)。作為參數(shù)，單擊“單擊”的頁(yè)面的數(shù)目可以被使用。

來(lái)個(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è)顯示運(yùn)行效果如下：