ページ番号変更コンポーネント¶

前提

機能説明¶

表示ページ番号を変更するリンクを表示します。

See the Pen this by BST developer (@bsearchtech)on CodePen.

設定方法¶

必須設定¶

Htmlの修正

<div data-[モード]="pagenator"></div>

任意設定¶

表示用メッセージの変更

cpMessage という変数に次のような指定を行うことで、表示文字列を変更することができます。

var cpMessage = {
    pagenator: {
        firstPage: '<<最初へ',
        prevPage: '<<前へ',
        nextPage: '次へ>>',
    },    
};

キー名	デフォルト値	説明
firstPage	<<最初へ	ページ番号変更コンポーネントへ最初のページへ遷移するリンクのテキスト
prevPage	<<前へ	ページ番号変更コンポーネントへ前のページへ遷移するリンクのテキスト
nextPage	次へ>>	ページ番号変更コンポーネントへ次のページへ遷移するリンクのテキスト

関連する設定パラメータの追加

var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
    uid: "[UID]",
    mode: "[モード]",
    inputId: "q",

    pagenationType: 1,
    pagenationCount: 4,
};

パラメータ名	データ型	デフォルト値	説明
pagenationType	数値 (1もしくは2)	1	ページ番号変更コンポーネントが生成するページ番号付きのページリンクの表示方法の指定 1を指定すると、現在のページを中心に左右にそれぞれ最大pagenationCountのページリンクを表示される 2を指定すると、現在のページを含めた全ページリンクがpagenationCountになるようにページリンクが表示される
pagenationCount	数値	4	現在表示しているページ番号の、両側何ページ分のページリンクをページャで表示するかの指定

dom構造¶

Dom

ページ番号変更コンポーネント¶

<div data-[モード]="pagenator" class="_[モード]_component">
  <div class="_pagenator">
    <!-- 1ページ目にいる場合はこの要素は出力されない -->
    <!-- 標準のCSSでは _nav._first は display:noneが指定されている -->
    <div class="_nav _first">
      <a class="_button">&lt;&lt;最初へ</a>
    </div>
      <!-- 1ページ目や最終ページなど、リンクがないものは _disableというクラス名が付与される -->
      <span class="_disable">&lt;&lt;前へ</span>
    </div>
    <!-- pagenationType, pagenationCount の指定に従い ページ番号リンクが繰り返し表示される -->
    <!-- 現在表示中のページ番号は ._current が表示される -->
    <div class="_nav _page _current">1</div>
    <!-- 標準のCSSでは ._current を持たない ._nav._page は display:noneが指定されている -->
    <div class="_nav _page">2</div>
    <div class="_nav _page">3</div>
    <div class="_nav _page">4</div>
    <div class="_nav _page">5</div>
    <div class="_nav _next">
      <!-- 1ページ目や最終ページなど、リンクがないものは _disableというクラス名が付与される -->
      <a class="_button">次へ&gt;&gt;</a>
    </div>
  </div>
</div>