[JS]jQueryのプラグイン100選 -2010年総集編

2010年に紹介したものを中心としたjQueryのプラグイン100+α選です。

今年は、アニメーションのエフェクトやレイアウト、後半は背景画像関連のプラグインが特に目立っていたように思います。

[ad#ad-2]

• コンテンツスライダー・カルーセル関連
• ギャラリー・画像拡大関連
• ナビゲーション関連
• タブ関連
• パネル・ボックス関連
• ツールチップ関連
• レイアウト関連
• 背景画像関連
• その他UI関連
• アニメーション関連
• スクロール・ドラッグなど操作関連
• テーブル・リスト・データ関連
• フォーム関連
• コンテンツ生成
• その他

コンテンツスライダー・カルーセル関連

simpleSli.de
フレキシブルでシンプルで軽量なコンテンツスライダーの決定版。

hash slider
個別リンクにも対応したコンテンツスライダー。

Sudo Slider
各パネルがブックマークできるコンテンツスライダー。

bxSlider
多彩な表示方法に対応したコンテンツスライダー。

Choco-Slider
カスタマイズも簡単なフレキシブルな軽量のコンテンツスライダー。

Tiny Circleslider
サークル状のコントローラーが面白いコンテンツスライダー。

Blockster transition effect
画像もテキストもブロック状に変更するコンテンツスライダー。

dualSlider
2つのパネルが独立して操作できるコンテンツスライダー。

Roundabout
要素をターンテーブルのようにくるくるっと表示。

ギャラリー・画像拡大関連

Micro Image Gallery
小さいスペースにも設置できる画像ギャラリー。
キャプチャは実物大。

jQuery Panel Gallery Plugin 2.0
約60種類のエフェクトを備えた画像ギャラリー。

jSquares
グリッド状に画像を配置して、キャプションを表示。

Automatic Image Slider
ページング機能付きのイメージスライダー。

AviaSlider
8種類のエフェクトをもったスライドショー。

sexyCycle image jQuery plugin
画像をさまざまなアニメーションでスライド表示。

imgZoom
ダイナミックなアニメーションで画像を拡大します。

jQuery.popeye 2.0
モーダルウインドウを使用しないインライン型の画像拡大スクリプト。

YoxView
画像をスタイリッシュに拡大表示するスライドショー。

Reel
画像内のオブジェクトをドラッグとホイールで360度回転させる。

Cloud Zoom
さまざまなスタイルで画像を拡大表示。

ImageHighlighter
画像の一部をハイライト表示。

maphilight
地図のような複雑な形状をハイライト表示。

jQuery-Notes
Flickrのように画像にメモを書き込めるようにします。

IMAGE BLUR
画像にブラー効果を与えます。

Inset Border Effect
画像にアニメーションするボーダーのエフェクトを加えます。

ナビゲーション関連

hoverFade
マウスのホバーにフェード効果を与えます。

MagicLine Navigation
LavaLampスタイルのナビゲーション。

Fresh Content Accordion
アニメーションの動作が気持ちいいアコーディオン。

hoverfade
マウスホバーで画像をフェードで変更します。

Panel Magic
マトリックス状のパネルを使ったダイナミックなナビゲーション。

NavIt
複数の開閉に対応した、多段階層用ナビゲーション。

Slick Drop down Menu with Easing Effect
滑らかなアニメーションを備えたドロップダウン。

BubbleUP
アイコンをふんわりとアニメーションで拡大表示。

jqDock
水平・垂直、揃えなどさまざまなタイプを用意したMac風のDock Menu。

タブ関連

Dynamic Page / Replacing Content
JavaScriptがオフでも遷移するタブコンテンツ。

TTabs
タブになる要素を自由に指定できるタブコンテンツ。

jQuery Smooth Tabs Plugin
フェードのアニメーションで切り替えるシンプルなタブ。

パネル・ボックス関連

Pines Notify
一定の時間、注釈のパネルを表示します。

Lightbox_me
DOM要素を指定して拡大表示できるLightbox。

jQuery modalBox
画像やAJAXに対応したドラッグで移動も可能なオープンソースのモーダルボックス。

Notify Bar
メッセージやエラーやアラートなどをブラウザ上部からスライド表示。

SlideNote
アニメーションでスライドするパネルを表示します。

Sidebar Plugin for bloggers
スクロールに追従するパネルをブラウザの端に表示します。

Easy Accordion
パネルをアコーディオンのアニメーションでスライドさせます。

ツールチップ関連

tinyTips
軽量だけどフレキシブルなツールチップ。

Colortip
6つのカラーが用意されたシンプルなツールチップ。

LDTT - super small tooltip
超軽量（1KB）の表示位置・フェードなどカスタマイズも可能なツールチップ。

レイアウト関連

Create Your Own Sliding Resizable Grid
アニメーションでグリッドレイアウトを生成。

Masonry
パネルを隙間なくレンガ風に配置。

jLayout
4つのレイアウトアルゴリズムを提供。

Equal Column Heights
高さの異なるカラムを揃えます（アニメーション可）。

The Footer Plugin
コンテンツの量が少なくてもフッタをブラウザの下部に表示。

Zoomooz
ページ内のあらゆるエレメントをズームしてナビゲーションさせます。

[ad#ad-2]

背景画像関連

Backstretch
リサイズにも対応、背景画像をブラウザの枠いっぱいに表示します。

fullscreenr
オーバーレイさせて背景画像をブラウザいっぱいに表示。

Transify
エレメントの背景の不透明度をコントロール、アニメーションにも対応。

retina
一枚の画像でサムネイルと拡大表示機能を実装します。

Supersized
画像をブラウザいっぱいに表示する画像ギャラリー。

jbgallery 2.0 BETA
背景をダイナミックにギャラリーとして活用。

jAni
再生機能もついた背景画像でアニメーション。

その他UI関連

Biggerlink
リンクの領域を指定したエレメント全体に変更します。

Zoomooz.js
ページ内のあらゆる箇所をアニメーションでズーム表示。

jsPlumb
エレメントを移動可能なパイプでつなぐ。

HoverAttribute
ホバーでテキストリンクのhrefやtitleのデータを表示。

DivCorners
div要素の内側でも外側でも角丸を配置。

Link Underlines Grow to Backgrounds on Hover
複数行に渡るテキストでも背景をホバーでハイライト。

アニメーション関連

hoverFlow
jQueryのアニメーション機能をよりスムーズに。

Pageswitch
ページ遷移にスライドやフェードのアニメーションを加えます。

Canimate
GIF以外の画像でもアニメーションに。

jQuery.spritely
任意の要素や背景をアニメーション。

Quovolver
指定したエレメント群をアニメーションを使って順番に表示します。

Circulate
円の軌跡とイージングを使用してあらゆる要素をアニメーション。

Shadow Motion Effect in 5 Lines
残像っぽく不透明度をアニメーション。

Shadow animation
シャドウをアニメーション。

bgFade
マウスホバーで背景をフェードでアニメーション。

スクロール・ドラッグなど操作関連

スムーズ ページスクローラー
ページ内アンカーにスムーズにスクロール、外部リンクにも対応。
商用でも無料になりました。

Tiny Scrollbar
コンテンツに垂直・水平のスクロールバーを設置できます。

AjaxScroll
垂直・水平に対応したAJAXコンテンツのスクロール。

Infinitely Draggable Content Area
コンテンツ内の全ての要素をドラッグで移動可能。

テーブル・リスト・データ関連

TargetTable
カーソルに合わせてテーブルのセルをハイライト。

PicNet Table Filter
テーブルのデータを素早くフィルタリング。

Easy List Splitter
リストを水平・垂直に自由に配置。

TufteGraph
きれいな棒グラフを簡単に作成。

フォーム関連

Form Tips
フォームのデフォルトにメッセージを表示。

Form Design with Sliding Labels
マウスをフォーカスすると、ラベルがスライド移動。

FormLabels Plugin
フォームのラベルを表示。パスワードにも対応。

Textbox Hinter
フォームにスタイルシートを適用できるテキストを表示します。

AutoTabIndex
設定した文字数を超えると、自動で次の入力欄へ移動。

Elastic
テキストエリアを文字量に合わせて自動拡大。

Simplest Twitter-like dynamic character count
Twitterのように入力できる残りの文字数を表示。

validity
クライアントサイドのフォームのvalidation。

Show Password
パスワードを一時的に可視状態にします。

Ie-select-width
IEでwidthを指定したセレクトボックスでも中身を全部表示。

コンテンツ生成

jTweetsAnywhere
@Anywhereにも対応、Twitterコンテンツをカスタマイズしてサイトに設置。

Simple FAQ
パネルが開閉するシンプルなFAQコンテンツ。

Pajinate
長いリストやコンテンツをフレキシブルにページネーション化。

jQuery.Syntax
25種類の言語をサポートしたシンタックスハイライター。

Snippet
15の言語に対応したシンタックスハイライター。デザインは39種類。

GMAP3
Google Mapsにオリジナルのマークやポリゴン、任意の画像などを加えて簡単に設置できます。

bMap
アイコンなどマークを配置したGoogle Mapsを簡単に設置できます。

その他

Phono
ブラウザを電話にしてインスタントメッセージを送れるようにします。

Lazy Loading Video
動画をLazy Load対応にします。

#grid
ページにグリッドを表示。

Griddy
ページにグリッドを表示し、サイズを自動で算出。

Sexy.js
AJAXを強化する軽量スクリプト。

prettyLoader
AJAXコンテンツを読み込む時のローダー。

jQuery webcam plugin
Webカメラを操作できるようにします。