rpage

JavaScript

Bootstrapを使ったレスポンシブなページネーション「rpage」

rpageはBootstrapを使ったレスポンシブに対応したページネーションを実装できます。シンプルで操作性もよく、レスポンシブなのでパソコンだけでなくスマホやタブレットでも、その画面幅に最適な状態のページネーションを表示できます。

rpage

デモ

デモでは横一列に並べられたシンプルなページネーションが設置されています。ページ数が1〜100まであることが瞬時にわかりますね。

また、レスポンシブに対応していることから、画面の幅に応じて省略(「…」の部分)される範囲も変わってきます。これにより、さまざまなデバイスからでも最適な状態でページネーションが表示されます。

デモのページネーションの両端は左右矢印になっていますが、ここは任意で好きなテキストに変更することが可能です。例えば、「Previous」と「Next」にしたり「前へ」と「次へ」にしたりと、マークアップから簡単に変更できます。

rpage

関連記事

  1. FakeLoader.js

    JavaScript

    フルスクリーンでカッコいいローディングアニメーション・FakeLoader.js

    FakeLoader.jsはフルスクリーンでカッコいいローディングアニ…

  2. Lightense Images
  3. AOS

    JavaScript

    スクロールに合わせていろんなアニメーションで表示できる「AOS」

    AOSはスクロールに合わせてフェードやフリップ、ズームなどのアニメーシ…

  4. Easy Z modal

    JavaScript

    シンプルなモーダルウィンドウ・ダイアログボックスを表示できる「Easy Z modal」

    Easy Z modalはシンプルでダイナミックなモーダルウィンドウ・…

  5. no-image
  6. jRCarousel

    JavaScript

    モダンエフェクトなレスポンシブ対応のカルーセル実装「jRCarousel」

    jRCarouselはモダンエフェクトなカルーセルを実装できるjQue…

最近の記事

  1. ベーコンエッグ&厚切りバタートースト
  2. 有栖川公園
  3. 広尾のスタバ
  4. マーガレットハウエルとミズノのコラボシューズ
  5. フレンチトーストや自家製ソーセージ

アーカイブ

PAGE TOP