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. Random Text Shuffle

    JavaScript

    シャッフルしながらテキストが表示される「Random Text Shuffle」

    Random Text Shuffleは文字をシャッフルしながらテキス…

  2. S-Pagination

    JavaScript

    スライダー付きのページネーションを実装できる「S-Pagination」

    S-Paginationはスライダー付きのページネーションを実装できる…

  3. Stepper.js

    JavaScript

    数値を手軽にアップ・ダウンできるステッパーを実装できる「Stepper.js」

    Stepper.jsは数値入力ボックスでの数値を手軽にアップ・ダウンで…

  4. Accessible Mega Menu
  5. funnyText.js
  6. JavaScript

    要素の位置までスクロールしてスピード設定もできるjQueryプラグイン「scrollToBySpee…

    scrollToBySpeedは指定した要素の位置までスクロールしてく…

最近の記事

  1. エチオピア
  2. 紗々 飴色和栗
  3. DCG-CA21
  4. Apple WatchでのMacロック解除を無効
  5. オータムスイートポテトフラペチーノ

アーカイブ

PAGE TOP