stickyTableColumns

JavaScript

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

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

stickyTableColumns

デモ

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

$('table').stickyTableColumns();

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

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

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

stickyTableColumns

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

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

関連記事

  1. Multi-Level Menu

    JavaScript

    流れるような遅延アニメーションが美しい階層化メニュー実装「Multi-Level Menu」

    Multi-Level Menuは流れるような遅延アニメーションが美し…

  2. Docked Link jQuery Plugin
  3. Pilpil

    JavaScript

    プログレッシブ形式で画像表示時間を短縮してくれる「Pilpil」

    Pilpilは、ページの画像表示の時間を短縮するためのJSライブラリで…

  4. Custom Carousel

    JavaScript

    カードスタイルのカルーセル・スライダー実装「Custom Carousel」

    Custom Carouselはカードスタイルによるシンプルなカルーセ…

  5. How To Create A Simple Image Slideshow

    JavaScript

    チルトエフェクトがオシャレなスライドショー「How To Create A Simple Image…

    オシャレなチルトエフェクトにダイナミックなイメージスライダーを実装でき…

最近の記事

  1. King クリーニングティッシュ
  2. PDA-STN36S
  3. クッキー&クリーム ポップコーン
  4. マウイチップス マウイオニオン味
  5. グリーンビーントゥーバー

アーカイブ

PAGE TOP