rpage

JavaScript

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

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

rpage

デモ

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

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

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

rpage

関連記事

  1. Playful Little Tooltip Ideas
  2. Unicorn.js

    JavaScript

    ホバーするとテキストがレインボーに光るjQueryプラグイン「Unicorn.js」

    おもしろいプラグインがあったのでご紹介します。テキストにホバーするとレ…

  3. JavaScript

    カスタマイズも自由にできるjQuery「bxSlider」の使い方

    個人的にかなりよさげなjQueryスライダーを使ってみました。その名も…

  4. Choice.js
  5. no-image

    JavaScript

    2枚の画像の違いを比較できるjQueryプラグイン「baSlider」

    baSliderはビフォー・アフターのような2枚の画像の違いを比較でき…

最近の記事

  1. 簡易アクセス
  2. SOUNDLINK MINI II Special Edition
  3. メリーストロベリーケーキフラペチーノ

アーカイブ

PAGE TOP