rpage

JavaScript

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

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

rpage

デモ

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

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

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

rpage

no-imageマウスの動きに連動するテキストシャドウ「Direction-aware text-shadow」前のページ

カスタマイズできるダイアログ・ライトボックスを作成できる「Dialogify」次のページDialogify

最近の記事

  1. THREE ヘアケア&スタイリングローション
  2. エルサルバドル アウアチャパン
  3. 山崎の水
  4. ナイトキャップ
  5. ルグラン・フィーユ・エ・フィス東京
PAGE TOP