ページャー

名前

BASICPAGER01

パーツバージョン

1.0.0

GCバージョン

1.3.0

パーツアイコン

要旨

ページャーをタッチしやすくコンパクトなUIに変換して出力します。

入出力仕様

各ページへのリンク(a要素)を含む要素を選択します。「次へ」「前へ」「先頭へ」「最後へ」のようなa要素も含めることができます。

現在のページ、次のページ、前のページ、最初のページ、最後のページは次の条件により判断します。

現在のページ
data-gc-label="current" 属性を含む要素、もしくは オプションパラメータ「現在のページを表すclass」で指定されたクラスを含む要素
次のページ
現在のページとして判断した要素のテキストから次のページ番号を算出し、そのページ番号を含む要素
前のページ
現在のページとして判断した要素のテキストから前のページ番号を算出し、そのページ番号を含む要素
最初のページ
data-gc-label="first" 属性を含む要素、もしくは オプションパラメータ「最初のページを表すclass」で指定されたクラスを含む要素
最後のページ
data-gc-label="last" 属性を含む要素、もしくは オプションパラメータ「最後のページを表すclass」で指定されたクラスを含む要素

変換後は、「最初のページ」「前のページ」を表すボタン、特定ページ番号へのリンク、「次のページ」「最後のページ」を表すボタンの順に出力します。

特定ページ番号へのリンクは、現在のページを基準としてその前後2ページ分(デフォルト設定)に削減されます。

オプション

現在のページ要素のclass(任意)

現在のページを示す要素のclass属性を指定します。

最初のページ要素のclass(任意)

最初のページを示す要素のclass属性を指定します。

最後のページ要素のclass(任意)

最後のページを示す要素のclass属性を指定します。

表示するページリンク数(任意)

現在のページを含め、特定ページ番号へのリンクを何個まで表示するかを、数字(正数)で指定します。0を指定した時は全件表示します。デフォルト値は5です。

追加するクラス(任意)

パーツのdiv要素に追加する独自クラスを指定します。スペース区切りで複数のクラスを指定することもできます。

ビューの種類

1行テキスト

出力HTMLの外枠にdiv要素が配置されます。特定ページ番号へのリンクはul/li要素で構成されます。

ビュー編集

なし

プリプロセス

なし

関連CSSセレクタ

.gcpBasicPager01(クラスセレクタ)

対応jQueryバージョン

なし

使用jQueryプラグイン

なし