2013年4月30日 星期二

jQuery 分頁 plugin- simplePagination.js

simplePagination.js

再來一個分頁的plugin

外掛網址
simplePagination.js

使用起來很簡單,引進plugin後,像這樣使用就好了
  1. $(function() {   
  2.     $(selector).pagination({   
  3.         items: 100,   
  4.         itemsOnPage: 10,   
  5.         cssStyle: 'light-theme'  
  6.     });   
  7. });  

然後再根據你點哪個分頁,去讀取內容就可以了。

一些可以設定的項目
items: Integer Default: 1 Total number of items that will be used to calculate the pages.
itemsOnPage: Integer Default: 1 Number of items displayed on each page.
pages: Integer Optional If specified, items and itemsOnPage will not be used to calculate the number of pages.
displayedPages: Integer Default: 5 How many page numbers should be visible while navigating.
Minimum allowed: 3 (previous, current & next)
edges: Integer Default: 2 How many page numbers are visible at the beginning/ending of the pagination.
currentPage: Integer Default: 1 Which page will be selected immediately after init.
hrefTextPrefix: String Default: "#page-" A string used to build the href attribute, added before the page number.
hrefTextSuffix: String Default: empty string Another string used to build the href attribute, added after the page number.
prevText: String Default: "Prev" Text to be display on the previous button.
nextText: String Default: "Next" Text to be display on the next button.
cssStyle: String Default: "light-theme" The class of the CSS theme.
selectOnClick: Boolean Default: true Set to false if you don't want to select the page immediately after click.
onPageClick(pageNumber, event): Function Optional Function to call when a page is clicked.
Page number and event are optional parameters.
onInit: Function Optional Function to call when the pagination is initialized.

Demo

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...