jQuery-ResizableColumns

JavaScript

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

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

jQuery-ResizableColumns

デモ

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

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

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

jQuery-ResizableColumns

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

スクロールしてもついてくるスティッキー実装「stickUp2」次のページstickUp2

最近の記事

  1. ホワイトチョコマカダミアドーナツ
  2. エッグペペ
  3. ダークチョコレート
  4. 朝のコーヒー
  5. ザンビア
PAGE TOP