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. OverlayScrollbars
  2. no-image
  3. Multipicker

    JavaScript

    要素を選択するときに直感的な操作を実現する「Multipicker」

    Multipickerは、日付や曜日、番号、その他さまざまな要素を選択…

  4. TextTailor.js

    JavaScript

    コンテナ内のフォントサイズを自動リサイズしてくれるjQueryプラグイン「TextTailor.js…

    TextTailor.jsはブラウザ幅に合わせてコンテナ内のテキストの…

  5. no-image
  6. radialIndicator

    JavaScript

    シンプルな円形のインジケーターを実装できるjQueryプラグイン「radialIndicator」

    radialIndicatorはシンプルで美しい円形のインジケーターを…

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP