jQuery-ResizableColumns

JavaScript

テーブルのカラムをリサイズできる「jQuery-ResizableColumns」

jQuery-ResizableColumnsは、テーブルのカラムをリサイズできるjQueryプラグインです。カラムの端辺りにカーソルを合わせてドラッグすることでサイズを調整できます。ユーザーが見やすいように自分で変更できるのはとても便利ですね。

jQuery-ResizableColumns

デモ

デモではSubject、Sem1、Sem2、Sem3と4つの列があるテーブルが設置されています。例えば、SubjectとSem1の間あたり(少しSubject寄り)にマウスカーソルを合わせると、カーソルのアイコンが変化します。この状態で左右にドラッグすることでカラムのサイズを調整できる仕組みです。

Subjectに入っている項目は、長めのテキストになっているのでカラムのサイズが短いと全てを表示させることができません。こういった状況で、カラムをリサイズすることができればテキストを簡単に確認できるのでユーザーにとっては助かる機能ですね。

デモではテーブル全体のサイズは変わらず、テーブル内のカラムのサイズを個別に調整できるようになっています。テーブル全体のサイズがそのままなら、ページのレイアウトが崩れる心配もないので安心ですね。

jQuery-ResizableColumns

関連記事

  1. no-image

    JavaScript

    コンテナのサイズに合わせて要素を動的に拡大・縮小できる「Scalable」

    Scalableは、コンテナ領域内にある要素をコンテナのサイズに合わせ…

  2. JavaScript

    回転するアニメーション付きの円形ナビゲーションを実装できる「wheelnav.js」

    wheelnav.jsは回転する円形のナビゲーションを実装することがで…

  3. no-image

    JavaScript

    背景にスクロールエフェクトを実装する「Physics-Based Background Scroll…

    背景に美しいスクロールエフェクトを実装する「Physics-Based…

  4. Fly to

    JavaScript

    カートに入れた際に飛んでいくエフェクトのjQueryプラグイン「Fly to」

    Fly toは商品をカートに入れた際にカートまで飛んでいくエフェクトを…

  5. underline.js

    JavaScript

    遊び心あるアニメーションと美しさを追求したアンダーライン「underline.js」

    underline.jsはアニメーションが付いた美しいアンダーラインを…

  6. Scrolla

    JavaScript

    スクロール時にアニメーションするjQueryプラグイン「Scrolla」

    Scrollaは上下スクロールしたときにアニメーションするjQuery…

最近の記事

  1. Waterlogue
  2. macOS Mojaveのダークモード
  3. Olli
  4. 単語帳メーカー(Flashcard Maker App)

Facebookページ

PAGE TOP