stickyTableColumns

JavaScript

水平(左右)にスライドできるテーブル実装「stickyTableColumns」

stickyTableColumnsは、データ量の多い表をページで表現する際にとても便利なjQueryプラグインです。表を「table」タグで作成したときに、その表の枠の幅を固定させ、表示可能領域以外の部分は水平(左右)にスライドすることで見ることができます。また、スライドバーも表の下部に表示されます。表をWEBページで表現すると、内容が分かりやすいうえに、単に目立たせる役割も果たしてくれます。それでは、このプラグインの詳細を見ていきましょう。

stickyTableColumns

デモ

まず、stickyTableColumnsの使用には、jQueryの読み込みが必要です。その上で、stickyTableColumnsのファイルを読み込みます。

$('table').stickyTableColumns();

固定させたい列の数を指定します。常に表示させたい項目などの列があれば、その表示は固定することができます。

$('table').stickyTableColumns({ columns: 2 });

たったこれだけです。とても簡単ですよね。複雑な記述は一切ありませんので、初めて使用する方でも安心して使用できると思います。また応用編として、スライドバーをフラットなデザインにしたり、丸みをもたせたりしてみると、さらに洗練されたデザインになると思います。

stickyTableColumns

preloadプリロードやローディング画面を実装できるjQueryプラグイン「preload」前のページ

Illustratorで、かわいいガーリーなイメージの作り方次のページ

関連記事

  1. Pushbar.js

    JavaScript

    スライドでコンテンツを引き出せる「Pushbar.js」

    Pushbar.jsはスライドでコンテンツやナビゲーションメニューを引…

  2. simpleDialog

    JavaScript

    レスポンシブ対応のシンプルなポップアップ・ダイアログを実装できる「simpleDialog」

    simpleDialogはレスポンシブに対応したポップアップ・ダイアロ…

  3. no-image

    JavaScript

    シンプルで美しい軽量のjQueryモーダルウィンドウ「umodal」

    umodalはスッキリしたシンプルで美しいモーダルウィンドウを実装でき…

  4. Tosrus

    JavaScript

    スマホやタブレットにも対応するLightbox風のjQueryプラグイン「Tosrus」

    TosrusというjQueryプラグインを使えば、スワイプやスクロール…

  5. Art Text Light jQuery plugin

    JavaScript

    テキストに光が移動するエフェクトを与えることができる「Art Text Light jQuery p…

    指定したテキストに光が移動するエフェクトを与えることができるjQuer…

  6. no-image

    JavaScript

    ページ読み込み時に画面上部にプログレスバーを表示する「Skylo」

    Skyloはページ読み込み時にプログレスバーを画面上部に表示できるのが…

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6

アーカイブ

PAGE TOP