Web Development
jQuery Pagination / ページリンク追加プラグイン
ブログやホームページなどに簡単にページリンクを追加できるjQueryプラグインです。
主な機能
- 連続するブログやホームページに自動に各ページへのリンクを追加します。
- 昇順、降順が選択可能
- ブログページは降順のリンク、商品のリストは昇順のリンクなど、目的に合わせて選択可能です。
- 前後ページへの移動リンクの追加有無を選択可能
- 簡単に前後ページへの移動が可能なリンクの追加有無を選択可能です。
- ページ幅に合わせてリンクの数を指定可能
- リンクの数を好みで指定可能です。
設置作業代行
- 日程調整
- 即日〜
- 作業時間
- 半日程度
- 作業費用
- ￥3,000円
(消費税込み)
使い方
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="//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' // ページリンクを降順で出力する
});