rpage

JavaScript

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

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

rpage

デモ

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

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

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

rpage

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

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

関連記事

  1. Los Scrollos

    JavaScript

    シンプルで滑らかな水平スクロール実装「Los Scrollos」

    Los Scrollosはシンプルで滑らかな水平スクロールを実装できる…

  2. Tilt.js

    JavaScript

    パララックスとチルトを兼ね備えたホバーエフェクト実装「Tilt.js」

    Tilt.jsはパララックスとチルトの動きを兼ね備えた滑らかなホバーエ…

  3. iziModal

    JavaScript

    エレガント・レスポンシブ・フレキシブルでそのうえ軽量なモーダルウィンドウ「iziModal」

    iziModalはエレガント・レスポンシブ・フレキシブルなモーダルウィ…

  4. Shuffle Letters

    JavaScript

    テキストをカシャカシャとシャッフルさせて表示していくjQueryプラグイン「Shuffle Lett…

    テキストをカシャカシャとシャッフルさせて表示していくjQueryプラグ…

  5. VerticalShift

    JavaScript

    要素を縦長に並べてマウスオーバーで全部表示させるjQueryプラグイン「VerticalShift」…

    とても面白い見せ方だったのでご紹介します。要素を縦長に並べてマウスオー…

  6. jExcel

    JavaScript

    Excelと互換性のあるスプレッドシートを埋め込めるjQueryプラグイン「jExcel」

    jExcelは、ブラウザにExcelと互換性のあるスプレッドシートを埋…

最近の記事

  1. SV-S251
  2. スラウェシ トラジャ
  3. 梅
  4. CAR-HLD12BK

アーカイブ

PAGE TOP