jQueryプラグイン「simplePagination.js」を使ってコンテンツをページングさせる

jQueryプラグイン「simplePagination.js」を使ってコンテンツをページングさせるサンプル 文章量が多くなった時にページングを使用したい時があると思います。
ただ、ページをファイルごとにわけて、リンクさせて・・・という手間は省きたい。
そんな時にはjQueryプラグインsimplePagination.jsを使ってみましょう。

使用方法 simplePagination.js - A simple jQuery pagination plugin and 3 CSS themes.からファイル一式をダウンロード。
<link rel="stylesheet" type="text/css" href="simplePagination.css" />
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script src="jquery.simplePagination.js"></script>
<script type="text/javascript">
$(function(){
$("#paging").pagination({
items: 8, //ページングの数
displayedPages: 1, //表示したいページング要素数
prevText: '前', //前へのリンクテキスト
nextText: '次', //次へのリンクテキスト
cssStyle: 'light-theme' //テーマ"dark-theme"、"compact-theme"があります
})
});
</script>

あとはid pagingを表示させたい場所に記載すれば完成です。
<div id="paging"></div>
ただしこれだけではただのページングです。
以下からはコンテンツと連動させるやり方です。
下記のようにコンテンツを記載します。
id部分でページングプラグインと連動させられます。
<p class="selection" id="page-1">one</p>
<p class="selection" id="page-2">Two</p>
<p class="selection" id="page-3">Three</p>
<p class="selection" id="page-4">Four</p>

またJavaScript側の記載も変更します。
$(function(){
$("#paging").pagination({
items: 8,
displayedPages: 1,
cssStyle: 'light-theme',
prevText: '前',
nextText: '次',
onPageClick: function(pageNumber){show(pageNumber)}
})
});
function show(pageNumber){
var page="#page-"+pageNumber;
$('.selection').hide()
$(page).show()
}

あとは最初だけ表示されるようCSSで調整します。
.selection {display: none;}
#page-1 { display: block;}

jQueryプラグイン「simplePagination.js」を使ってコンテンツをページングさせるサンプル

sponsors

「jQueryプラグイン「simplePagination.js」を使ってコンテンツをページングさせる」をシェアする

記事作成:
記事URL:

TOP > > > jQueryプラグイン「simplePagination.js」を使ってコンテンツをページングさせる