jQuery Resizable Columns

JavaScript

テーブルの列の幅をドラッグでサイズ変更できる「jQuery Resizable Columns」

じっくりテーブル内の情報を見たい時なんかに便利そうですね。テーブルの列幅をドラッグで好きなサイズに変更できる「jQuery Resizable Columns」です。列の境界線にマウスを乗せるとカーソルが変わるので、そこでドラッグして幅のサイズを調整することができます。

[ads_center]

使い方

実際のデモでは以下の境界線付近をドラッグして幅のサイズを変更することができます。

jQuery Resizable Columns

使い方もとてもシンプルですね。

<script>
$(function(){
    $("table").resizableColumns({
        store: store
    });
});
</script>

自由度の高いテーブルを実装したい時に覚えておきたいですね。

関連記事

  1. no-image

    JavaScript

    スマホなどに最適なテーブルを実装できる「Mobile-Friendly Table」

    Mobile-Friendly Tableはスマホなどのモバイルに最適…

  2. Light-Zoom

    JavaScript

    CSSを使用した画像ズームを実装できるjQueryプラグイン「Light-Zoom」

    Light-Zoomは純粋なCSSを使用した画像ズーム(拡大)機能を実…

  3. no-image

    JavaScript

    レスポンシブでマルチレベルに対応したナビゲーション「K-Responsive-Menu」

    K-Responsive-Menuは、レスポンシブでマルチレベルに対応…

  4. Prism Effect Slider

    JavaScript

    プリズム効果を実装することができるスライダー「Prism Effect Slider」

    おもしろいスライダーがあったのでご紹介します。Prism Effect…

  5. Ace Responsive Menu
  6. luxy.js

    JavaScript

    優雅な慣性スクロールとパララックスエフェクトを実装できる「luxy.js」

    luxy.jsは優雅で美しい慣性スクロールとパララックスエフェクトを実…

コメント

    • chocochip
    • 2013年 8月 04日

    こんにちは。
    chocochipと申します。
    こちらはプラグインと異なり、記載の$(function以下の呼び出しのみで使えるのでしょうか。テンプレート内で実装してみたのですが、反映されず戸惑っています。

    宜しくお願い致します。

    • こんにちは。
      こちらはjQueryなので本体とダウンロードしたプラグインファイルを読み込んでおく必要があります。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Soundcore Liberty Neo(第2世代)
  2. EH-NA0B
  3. KPS-88
  4. Happy Plugs AIR1
  5. cheero Stream 10000mAh

アーカイブ

PAGE TOP