NO IMAGE

JavaScript

テキストコンテンツをページ分割(ページネーション)できる「jPaginate」

jPaginateはWebページ内のテキストコンテンツをページ分割(ページネーション)することができるjQueryプラグインです。長文記事などで下へずっとスクロールしながら読んでいると、今どの場所を読んでいたか分からなくなってしまう時がありますが、ページ分割されていれば、こういう問題も少なくなりそうですね。

jPaginate

jPaginate

サンプルページでは、2つのデモが用意されています。長い文章を分割して表示させているので、下へずっとスクロールしていく必要がなく、その場でサクサクと読み進めていくことができます。

ページナンバー、または左右の矢印ボタンをクリックすることで、ページを移動できます。

長いテキストを分割させることで、Webページのレイアウトもスッキリするので、省スペースながらもたくさん情報を詰め込みたい時に便利ですね。

また、jPaginateにはオプションもいくつか用意されています。主なオプション項目は、pagination_class、items_per_page、prev_next、prev_text、next_textです。

ページを分割する数はitems_per_pageで指定することができます。また、前後移動するボタンは、prev_textとnext_textから指定できます。デフォルトでは、prev_textが「«」、next_textが「»」です。

マークアップ、使い方ともに簡単に実装できるので、テキストコンテンツにページ分割機能を実装したいという人は、ぜひ「jPaginate」をチェックしてみてはいかがでしょうか?

関連記事

  1. DD Scroll Boxes
  2. Shave

    JavaScript

    設定した高さに基づいて複数行のテキストを切り取る「Shave」

    Shaveは設定した最大の高さに基づいてHTML要素内に収まるように複…

  3. no-image

    JavaScript

    シンプルで軽量なスクロールアニメーション実装「animateMePlz」

    animateMePlzはシンプルで軽量なスクロールアニメーションを実…

  4. JavaScript

    レスポンシブでカスタマイズ性に優れたカルーセルを実装できるjQueryプラグイン「slick」

    slickというjQueryプラグインを使えば、レスポンシブでカスタマ…

  5. scroll-scope.js

    JavaScript

    親要素の影響を受けずに子要素だけを固定してスクロールさせる「scroll-scope.js」

    scroll-scope.jsは親要素の影響を受けずに子要素だけを固定…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP