stickyTableColumns

JavaScript

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

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

stickyTableColumns

デモ

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

$('table').stickyTableColumns();

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

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

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

stickyTableColumns

関連記事

  1. Dependent Dropdown

    JavaScript

    ネストされたセレクトボックスを実装できる「Dependent Dropdown」

    Dependent Dropdownはネストされたセレクトボックスを実…

  2. Bootstrap Show Password
  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで要素を挿入できるメソッドがたくさんあるので整理してみた

    jQueryでHTML要素を追加するメソッドが色々あるので整理するため…

  4. Gradientify

    JavaScript

    シンプルなCSSグラデーション変化を実装できる「Gradientify」

    GradientifyはシンプルなCSSグラデーション変化を実装するこ…

  5. no-image
  6. JavaScript

    2つの異なるスクロール動作が印象的なjQueryプラグイン「multiscroll.js」

    multiscroll.jsというおもしろいjQueryプラグインがあ…

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP