クラスを追加するだけで簡単にページ内分割を実装するJavascript

▼EntryMore▼

1, スクリプトファイルとCSSファイルの読み込み

スクリプトファイルを読み込みます。jsファイル、CSSファイルへのパスは保存先のものに変更してください。

2, 分割処理の実行

上記スクリプトの読み込みのあとに、この分割処理の実行部分を挿入します。
この処理により、ページンググループに設定されている要素を分割し、ページングを挿入します。

3, 分割したい要素にクラス名をつける

1ページに表示したい部分をDIV要素で囲い、クラス名に"paraGroup"を追加します。
（ex. <div class="paraGroup">）
分割したい要素すべてに、クラス名"paraGroup"をつけてください。
この"paraGroup"が設定されている要素を分割し表示します。

4, ページングを挿入するDIVタグを設置

上記タグを挿入することで、そのタグの個所にページングを挿入します。
また、追加したタグ分、自動でページングを挿入しますので、
例えば、コンテンツが長い場合に、コンテンツの上下にページングを埋め込むことも可能です。

▼追加されるページングサンプル

（※サンプルにあるCSSを編集することでカスタマイズが可能です）

一番左と一番右にある矢印は、設定された表示ページ数よりページ数が多い場合に表示されます。
これをクリックすることで10ページ目以降のページ処理が表示されます。（※サンプルの場合）

5, Javascriptオフ時の設定

上記のソースを任意の場所に挿入してください。
Javascriptオフで閲覧している場合は、自動的に非表示の部分を表示します。

6, オプション

「pini.ini();」のカッコ内に数字を入れることで、ページングの最大表示数を設定できます。
（※デフォルト値は10です）