Web Development

jQuery Pagination / ページリンク追加プラグイン

ブログやホームページなどに簡単にページリンクを追加できるjQueryプラグインです。

主な機能

連続するブログやホームページに自動に各ページへのリンクを追加します。
昇順、降順が選択可能
ブログページは降順のリンク、商品のリストは昇順のリンクなど、目的に合わせて選択可能です。
前後ページへの移動リンクの追加有無を選択可能
簡単に前後ページへの移動が可能なリンクの追加有無を選択可能です。
ページ幅に合わせてリンクの数を指定可能
リンクの数を好みで指定可能です。

フリーダウンロード

最新版
Ver. 1.0.1
リリース日
2015/12/20

設置作業代行

日程調整
即日〜
作業時間
半日程度
作業費用
¥3,000円
(消費税込み)

設置予定URL

オンラインデモ

使い方

CSS

jQueryPagination-x.x.x.cssを読み込んでください。


<link rel="stylesheet" type="text/css" href="jQueryPagination-x.x.x.css">

JavaScript

jQueryを読み込んだ後、jQueryPagination-x.x.x.jsを読み込んでください。


<script type="text/javascript" charset="UTF-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="jQueryPagination-x.x.x.min.js"></script>

その後、ページがロードされたらリンクを生成するために、対象のエレメントに対しjqPpagination()を実行します。


<script type="text/javascript" charset="UTF-8">
$(document).ready(function() {
	$('#targetElement').jQPagination();
});
</script>

オプション指定

pageName
デフォルト:'' | 任意の文字列
ページ順を表する数字部分は除外して、ページ名(ファイル名)を必須で指定します。
maxPageNum
デフォルト:10 | 任意の数字
ページ順を表す数字の上限を指定します。
numOfPageLinks
デフォルト:7 | 任意の数字
追加するページリンクの数を指定します。
currentPageClass
デフォルト:'active' | 任意の文字列
現在のページリンクに付与するクラス名を指定します。
※ 空白区切りで複数クラスを指定することも可能です。
enablePrevNextLink
デフォルト:'false' | 'true'
前後ページへの移動リンクの追加の有無を指定します。
pageOrder
デフォルト:'ascend' | 'descend'
ページリンクの昇順、降順を選択指定します。

オプション指定例


// blog_1.htmlからblog_20.htmlまでページが存在し、
// 各ページに10個のリンクと前後ページのリンクを降順に追加する場合

$('#sampleElement').jQPagination({
	'pageName' : 'blog_',								// 数字部分と拡張子を除いたファイル名
	'maxPageNum' : 20,									// ページ数の上限
	'numOfPageLinks' : 10,							// リンクの数
	'currentPageClass' : 'active',			// 現在のページリンクのクラス名
	'enablePrevNextLink' : 'true',			// 前後ページ移動リンクを追加する
	'pageOrder' : 'descend'							// ページリンクを降順で出力する
});

カスタマイズ / サポート 最新版 ダウンロード