スペックやデータ、料金表などを表示するためには、テーブルコーディングは欠かせませんね。

テーブルにjQueryのプラグインを実装すると、ソートやページングなどなど、様々な機能を追加する事ができます。

今回は、テーブルに実装できるjQueryプラグインいろいろとまとめてみました。

Flexigrid – Web 2.0 Javscript Grid for jQuery

カラムのリサイズやソート、ページングなどなど、たった数行のコードを追加するだけで、とってもフレキシブルなテーブルが完成します！

Expand table rows with jQuery – jExpand plugin

折りたたみができるプラグインです。いろいろと使い道がありそうですね。

jQuery Visualize Plugin: Accessible Charts & Graphs from Table Elements using HTML 5 Canvas

jQueryとHTML5をつかって、テーブルに入力された数値をグラフにビジュアライズしてくれます。テーブル内の数値はブラウザ上で変更する事も可能で、グラフも同時に変更されます。

jquery.csv2table.js

CSVファイルをテーブル表示してくれるjQueryのプラグイン。エクセルは使えるけど、HTMLはちょっと…。といったクライアントの方に重宝しそうなプラグインですね。

jqGrid

ソートやページングなど様々な機能が実装できます。

Ingrid, the jQuery Datagrid.

こちらも同様に、ソートやページングなどのテーブル

jQuery plugin: Tablesorter 2.0

すっきりとしたデザインで見やすいソート機能

jQuery treeTable 2.0

ツリー表示が実装できます。

HeatColor, a jQuery plugin

とってもきれいなヒートカラーをテーブルに実装

tableRowCheckboxToggle

テーブルの列ごとチェックボックスに反応させることができます。

DataTables

こちらもソートやページングが実装できるjQueryプラグインです。

TableEditor

編集可能なテーブルを作ることができます。

TinyTable JavaScript Table Sorter – 2.5KB

わずか2.5KBでソートやページング機能が実装できるプラグイン

tableFilter

カラムの上部に配置されているボックスに文字を入力して、絞り込むことができます。

jQuery Column Filters

こちらも、データを絞り込む事ができるフィルター機能

Allan Jardine | Reflections | KeyTable

タブキーでセルの選択を移動させることができます。

Drag and drop table content with JavaScript

ドラッグ アンド ドロップが可能になります。

Table Drag and Drop JQuery plugin

こちらもドラッグ アンド ドロップ可能になるjQueryプラグインです。

前回は、『Scriptを使わないCSSエフェクト、Tipsいろいろ』をご紹介いたしました。

今回は、逆にjQueryを使ったサンプル集です。なるべく簡単に使えそうな、プラグインを中心にまとめてみました。

Lightbox, Modal Window関連

jQuery lightBox plugin

とってもシンプルなLightboxプラグイン。

Facebox

画像だけでなく、テキストも表示できます。

prettyPhoto a jQuery lightbox clone

角丸がかわいいLightboxですね。

NyroModal

画像やYouTubeの動画やフォームなど

SimpleModal

その名の通り、とってもシンプルなModalWindow

画像関連

jQZoom

虫眼鏡のように、画像をズームしてくれます。

jQuery virtual tour

不動産屋さんの物件紹介などでよく見かける、ヴァーチャルツアー

Photo Slider

サムネイルの動きがいい感じのPhoto Slider

jQuery Cycle Plugin

スライドショープラグイン

jCarousel

縦や横にスライドできるスライダー

jCarousel Lite

こちらもスライダーの軽いバージョン

jQuery Gallery Scroller

画像をクリックすると、次の画像がスライドしてきます。

Drop Shadow jQuery Plugin

画像にシャドウをつけてくれるプラグイン

メニュー関連

IconDock

MacのDock風なメニュー

LavaLamp for jQuery lovers!

マウスオーバーすると、LavaLampのように、丸い画像がついてきます。

Sliding Menu

メニューがびよ〜んと出てきます。

SuckerFish Style

プルダウンメニューが作れます。

Accordion

アコーディオンのUI

フォーム関連

jNice, styled forms

スタイリッシュなフォームを作るにはこちら

Select Box replacement

セレクトボックスをカスタマイズ

jQuery Checkbox

チェックボックスをカスタマイズ

jquery.combobox

コンボボックスをカスタマイズ

focus fields

ボックスをクリックするとハイライトされます。

ToggleFormText plug-in

ボックスにテキストが表示されていて、クリックすると非表示にします。

テーブル関連

Tablesorter

ソートができるテーブル。

Table Drag and Drop JQuery plugin

ドラッグ&ドロップできるテーブル。

HeatColor

値に応じて背景色をかえるプラグイン。テーブル以外にも使えます。

その他お役立ち

jVariations

右側のフォームに応じて、ページの表示を切り替えられます。

Jquery Wizard Plugin

何かと使えそうで便利なウィザードプラグイン

jQuery clueTip

いろいろなタイプのツールチップを表示できます。

jQuery Chart Plugin

チャートのプラグイン

jQuery color picker plug-in

カラーピッカープラグイン

Color Picker

こちらもカラーピッカープラグイン

Progress Bar Plugin

プログレスバーを表示するプラグイン

お役立ちjQueryまとめ

50+ Amazing Jquery Examples- Part1

51種類の使えるjQueryのサンプルがまとめられております。

The ultimate jQuery Plugin List

こちらにもかなり多くのPluginがリストアップされていました。

1012 + Ajax/Javascript/Dhtml examples and demos to download

こちらは、jQueryだけでなく、いろいろなFrameworkを紹介されています。

jQueryを使ったサンプル集