jQuery Resizable Columns

JavaScript

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

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

[ads_center]

使い方

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

jQuery Resizable Columns

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

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

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

関連記事

  1. formToWizard

    JavaScript

    ステップごとに入力可能なフォームを実装できる「formToWizard」

    formToWizardはステップごとに(ウィザード)入力可能なフォー…

  2. FilmRoll

    JavaScript

    中央に来た項目に焦点を当てるカルーセルを実装できるjQueryプラグイン「FilmRoll」

    FilmRollというjQueryプラグインを使えば中央に来た項目に焦…

  3. Accessible Dialog

    JavaScript

    ナビゲーションメニューをモーダルダイアログで表示する「Accessible Dialog」

    Accessible Dialogは、ナビゲーションメニューをモーダル…

  4. JavaScript

    レスポンシブに対応している軽量のjQueryスライダー「Unslider」

    とても軽量でレスポンシブにも対応しているjQueryスライダー「Uns…

  5. Timeline.js

    JavaScript

    スライド式のタイムラインを実装できるjQueryプラグイン「Timeline.js」

    Timeline.jsは、スライド式によるタイムラインを実装することが…

  6. AJAX Live Search

コメント

    • chocochip
    • 2013年 8月 04日

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

    宜しくお願い致します。

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

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

最近の記事

  1. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ
  2. カメラマングローブ Grip Hot Shot III
  3. 包(つつむ)巾着ポーチ
  4. KMC-80BK

Instagram始めました

Facebookページ

PAGE TOP