[JS]jQueryのプラグイン100選 -2008年総集編
Post on:2008年12月3日
2008年に紹介したものを中心としたjQueryのプラグイン100選です。
![jQueryのプラグイン100選 -2008年](/wp-content/uploads/2008120401.png)
- ギャラリー・画像拡大関連
- ナビゲーション関連
- タブ関連
- パネル・ボックス関連
- 角丸関連
- ツールチップ関連
- レイアウト補助関連
- その他UI関連
- エフェクト関連
- スクロール・ドラッグなど操作関連
- グラフ関連
- テーブル・リスト関連
- フォーム関連
- スタイルシート関連
- マウス・キーボード関連
- その他
各カテゴリの振り分けは微妙なものも多々あります。
ギャラリー・画像拡大関連のjQueryのプラグイン
![デモのキャプチャ](/wp-content/uploads/2008120401-02.png)
jquery.popeye
省スペースの画像ギャラリー。
![デモのキャプチャ](/wp-content/uploads/2008032101-16.png)
Galleria
画像ギャラリー。
![デモのキャプチャ](/wp-content/uploads/2008051205-29.png)
nyroModal
多機能なLightbox風にコンテンツを表示。
![デモのキャプチャ](/wp-content/uploads/2008091101-18.png)
MopBox
スライド機能付きの移動可能なボックスを表示。
![デモのキャプチャ](/wp-content/uploads/2008051205-30.png)
prettyPhoto
かわいい感じのLightbox風スクリプト。
![デモのキャプチャ](/wp-content/uploads/2008012901-30.png)
Shadowbox
複数のJavaScriptライブラリに対応したLightbox。
![デモのキャプチャ](/wp-content/uploads/2008062501-31.png)
Slider Gallery
Apple風のスライドギャラリー。
![デモのキャプチャ](/wp-content/uploads/2008101401-24.png)
morphing gallery
モーフィングする画像ギャラリー。
![デモのキャプチャ](/wp-content/uploads/2008072301-01.png)
3D Image Carousel
画像を3Dの空間に回転させるカルーセル。
![デモのキャプチャ](/wp-content/uploads/2008091101-22.png)
jParallax
複数のパネルを重ねて、視差で3D効果。
![デモのキャプチャ](/wp-content/uploads/2008072301-12.png)
Garage Door Style Menu
シャッターのようにアニメーションで開閉。
![デモのキャプチャ](/wp-content/uploads/2008120401-01.png)
s3Slider
打ち出し画像をフラッシュっぽく。
![デモのキャプチャ](/wp-content/uploads/2008101401-21.png)
productPlacement
ダイナミックにコンテンツを拡大縮小表示。
![デモのキャプチャ](/wp-content/uploads/2008101401-08.png)
CrossSlide
画像をクロスフェードさせながら変更。
![デモのキャプチャ](/wp-content/uploads/2008111701-34.png)
WDP Zoomer
画像をズーム表示。
jQuery Cycle Plugin
画像効果。
![デモのキャプチャ](/wp-content/uploads/2008051205-23.png)
jQuery Thumbs
サムネイルを生成。
![デモのキャプチャ](/wp-content/uploads/2008091101-32.png)
iFixPng improved
IE6で透過PNGを表示するiFixPngの改良版。
![デモのキャプチャ](/wp-content/uploads/2008091101-07.png)
dwImageProtector
画像を簡単にダウンロードできないように。
![デモのキャプチャ](/wp-content/uploads/2007112309.gif)
Lazy Load
表示されてから画像を読み込む。
![デモのキャプチャ](/wp-content/uploads/2007112335.gif)
gradient
画像を使用しないでグラデーションを生成。
ナビゲーション関連のjQueryのプラグイン
![デモのキャプチャ](/wp-content/uploads/2008101401-11.png)
Background Image Animations
背景画像をアニメーション。
![デモのキャプチャ](/wp-content/uploads/2007112307.gif)
LavaLamp Menu
現在位置・ホバー時のハイライトの動きが気持ちいいいナビゲーション。
![デモのキャプチャ](/wp-content/uploads/2008072301-32.png)
Superfish
水平・垂直型に対応した、アニメーションで開閉するドロップダウン。
![デモのキャプチャ](/wp-content/uploads/2008072301-10.png)
droppy
アニメーションで開閉する多段階層対応のドロップダウン。
![デモのキャプチャ](/wp-content/uploads/2008062501-16.png)
iPod-style Drilldown Menu
iPod風に切替わるドリルダウンメニュー。
![デモのキャプチャ](/wp-content/uploads/2008072301-07.png)
Column Navigation
Mac OS X風のカラムのナビゲーション。
![デモのキャプチャ](/wp-content/uploads/2008062501-04.png)
Accordion Menu script
さまざまなアコーディオン。
タブ関連のjQueryのプラグイン
![デモのキャプチャ](/wp-content/uploads/2008012901-08.png)
idTabs
さまざまな形状のタブを実装。
![デモのキャプチャ](/wp-content/uploads/2008012901-23.png)
JQuery TabContainer Theme with Tab Transition Animations
フェードするタブ。
![デモのキャプチャ](/wp-content/uploads/2008012901-18.png)
jQuery UI Tabs
フェードやスライドなどのエフェクトで開くタブ。
![デモのキャプチャ](/wp-content/uploads/2007112306.gif)
Coda-Slider
タブ以外にもリンクを設置できるスライダー。
パネル・ボックス関連のjQueryのプラグイン
![デモのキャプチャ](/wp-content/uploads/2008051205-26.png)
Kwicks
スムーズに伸び縮み。
![デモのキャプチャ](/wp-content/uploads/2007112328.gif)
Horizontal Accordion
水平型のダイナミックなアコーディオン。
![デモのキャプチャ](/wp-content/uploads/2008062501-08.png)
SimpleModal
シンプルなモーダルウインドウ。
![デモのキャプチャ](/wp-content/uploads/2008072301-31.png)
jGrowl
Mac OS XのGrowl風にメッセージを表示。
![デモのキャプチャ](/wp-content/uploads/2008032101-30.png)
wSlide
さまざまなエフェクトでパネルをスライド。
![デモのキャプチャ](/wp-content/uploads/2008091101-17.png)
MopSlider
オート・マニュアルに対応したコンテンツスライダー。
![デモのキャプチャ](/wp-content/uploads/2008051205-20.png)
jQuery Growl
次々に告知を表示。
![デモのキャプチャ](/wp-content/uploads/2008101401-33.png)
Scroll your HTML
ホイールにも対応した高機能なスクロールするコンテンツ。
角丸関連のjQueryのプラグイン
![デモのキャプチャ](/wp-content/uploads/2008072301-22.png)
jquery-roundcorners-canvas
角丸生成。
![デモのキャプチャ](/wp-content/uploads/2008032101-14.png)
Cornerz
要素の角丸化。
![デモのキャプチャ](/wp-content/uploads/2008051205-02.png)
Anti-aliased Rounded corners
アンチエイリアスの角丸。
ツールチップ関連のjQueryのプラグイン
![デモのキャプチャ](/wp-content/uploads/2008091101-19.png)
MopTip
個々のサイズやトリガー調整が可能なツールチップ。
![デモのキャプチャ](/wp-content/uploads/2008051205-09.png)
Easiest Tooltip and Image Preview Using jQuery
テキストや画像のツールチップ。
![デモのキャプチャ](/wp-content/uploads/2008062501-26.png)
Tipsy
ツールチップ。
![デモのキャプチャ](/wp-content/uploads/2008051205-04.png)
Coda Popup Bubbles
ツールチップをふわっと表示。
レイアウト補助関連のjQueryのプラグイン
![デモのキャプチャ](/wp-content/uploads/2008111701-01.png)
Equal Heights
異なるカラムの高さを揃えます。
![デモのキャプチャ](/wp-content/uploads/2008101401-02.png)
Position Footer
フッタを最下部に固定。
![デモのキャプチャ](/wp-content/uploads/2008101401-14.png)
jScrollPane
オリジナルのバーで、スクロールパネルを実装。
![デモのキャプチャ](/wp-content/uploads/2008032101-23.png)
jquery.biggerlink
リンクのエリアを拡大。
![デモのキャプチャ](/wp-content/uploads/2008091101-12.png)
Link Scrubber
リンクのoutlineを自動消去。
その他UI関連のjQueryのプラグイン
Interface elements for jQuery
インターフェイス関連、多種多様。
![デモのキャプチャ](/wp-content/uploads/2008120401-04.png)
iNettut
iGoogle風のインターフェイス。
![デモのキャプチャ](/wp-content/uploads/2008051205-08.png)
Developing an accessible slider
アクセシブルなスライダー。
エフェクト関連のjQueryのプラグイン
![デモのキャプチャ](/wp-content/uploads/2008012901-22.png)
jRails -jQuery on Rails
21種類のエフェクトを実装。
jQuery Easing Plugin
多種多様なイージング。
![デモのキャプチャ](/wp-content/uploads/2008072301-03.png)
Bounce
パネルの開閉時にバウンドのアニメーション。
![デモのキャプチャ](/wp-content/uploads/2008032101-33.png)
Map Hilight
複雑な形状でもハイライト表示。
![デモのキャプチャ](/wp-content/uploads/2008101401-10.png)
seekAttention
注目箇所だけハイライトのアニメーションで強調。
スクロール・ドラッグなど操作関連のjQueryのプラグイン
![デモのキャプチャ](/wp-content/uploads/2008012901-34.png)
スムーズ ページスクローラー
ページ内アンカーにスムーズスクロール。
![デモのキャプチャ](/wp-content/uploads/2008062501-33.png)
Smart Floating Banners
スクロールしても定位置に表示。
![デモのキャプチャ](/wp-content/uploads/2008012901-29.png)
Sortables
コンテンツをドラッグ。
![デモのキャプチャ](/wp-content/uploads/2007112311.gif)
jqDnR
ドラッグ&ドロップ、リサイズのシンプル版。
グラフ関連のjQueryのプラグイン
![デモのキャプチャ](/wp-content/uploads/2008012901-05.png)
flot
チャートやグラフを描画。
![デモのキャプチャ](/wp-content/uploads/2008051205-06.png)
Creating accessible charts using canvas and jQuery
変更したデータをリアルタイムに円・折れ線・棒グラフに反映。
![デモのキャプチャ"](/wp-content/uploads/2008072301-20.png)
jQuery Sparklines
インラインにグラフを配置。
テーブル・リスト関連のjQueryのプラグイン
![デモのキャプチャ](/wp-content/uploads/2008072301-36.png)
Flexigrid
テーブルのUI拡張。
![デモのキャプチャ](/wp-content/uploads/2008091101-05.png)
Animated Sortable Datagrid
アニメーションでソートするテーブル。
![デモのキャプチャ](/wp-content/uploads/2008012901-09.png)
ingrid the jQuery Datagrid
データグリッド。
![デモのキャプチャ](/wp-content/uploads/2008062501-17.png)
Tablesorter 2.0
データのソート。
![デモのキャプチャ](/wp-content/uploads/2007112316.gif)
Table Hover
テーブルのホバー箇所をハイライト。
![デモのキャプチャ](/wp-content/uploads/2008101401-30.png)
ListNav
リストの高機能なナビゲーションを作成。
![デモのキャプチャ](/wp-content/uploads/2008120401-03.png)
Multi Column List
リストをマルチカラムに。
フォーム関連のjQueryのプラグイン
![デモのキャプチャ](/wp-content/uploads/2008111701-22.png)
jqTransform
フォームのデザイン変更やアニメーションを追加。
![デモのキャプチャ](/wp-content/uploads/2008091101-20.png)
prettyCheckboxes
チェックボックスやラジオボタンを装飾。
![デモのキャプチャ](/wp-content/uploads/2008111701-14.png)
Geogoer VChecks
チェックボックスをドレスアップ。
![デモのキャプチャ](/wp-content/uploads/2008012901-04.png)
File Style Plugin for jQuery
「input type="file"」をスタイリング。
![デモのキャプチャ](/wp-content/uploads/2008101401-05.png)
Context highlighting
フォーカスした箇所だけデザイン変更して強調。
![デモのキャプチャ](/wp-content/uploads/2008091101-15.png)
Justify elements
ツラを合わせて表示。
![デモのキャプチャ](/wp-content/uploads/2008012901-17.png)
jQuery textarea resizer plugin
textareaを縦方向にサイズ変更。
![デモのキャプチャ](/wp-content/uploads/2008062501-06.png)
jQuery auto-tabbing and filter plugin
自動タブ機能。
![デモのキャプチャ](/wp-content/uploads/2007112319.gif)
datePicker
日付の入力支援。
スタイルシート関連のjQueryのプラグイン
![デモのキャプチャ](/wp-content/uploads/2008051205-32.png)
jQuery StyleSwichter
スタイルシートの切替。
![デモのキャプチャ](/wp-content/uploads/2008062501-25.png)
Styleswitch jQuery Plugin
スタイルシートの切替。
![デモのキャプチャ](/wp-content/uploads/2008111701-28.png)
Font-Sizer
フォントサイズを任意の値に変更。
![デモのキャプチャ](/wp-content/uploads/2008032101-11.png)
jQuery Browser Plugin
ブラウザを判別して、スタイルシートで利用。
![デモのキャプチャ](/wp-content/uploads/2008032101-09.png)
Automated image preloading
CSSに記述した画像を自動プリロード。
マウス・キーボード関連のjQueryのプラグイン
![デモのキャプチャ](/wp-content/uploads/2008101401-27.png)
event.drag, drop, hover, wheel
ドラッグ、ドロップ、ホバー、ホイールとマウスイベントの機能強化。
![デモのキャプチャ](/wp-content/uploads/2008091101-29.png)
jGesture
マウスジェスチャーの取得。
![デモのキャプチャ](/wp-content/uploads/2008111701-13.png)
WheelSpiner
マウスのホイールイベントを取得。
![デモのキャプチャ](/wp-content/uploads/2008091101-14.png)
js-hotkeys
キーボードイベントの取得。
Creating a Virtual jQuery Keyboard
バーチャル キーボード。
その他のjQueryのプラグイン
![デモのキャプチャ](/wp-content/uploads/2008101401-34.png)
jQuery SWFObject
フラッシュコンテンツを設置。
![デモのキャプチャ](/wp-content/uploads/2007112321.gif)
jPrintArea
指定した範囲のみ印刷。
![デモのキャプチャ](/wp-content/uploads/2008091101-01.png)
addSizes.js: automatic link file-size generation
ファイルサイズを自動で表示。
![デモのキャプチャ](/wp-content/uploads/2008012901-32.png)
Wresize
IE6, 7のリサイズイベント対応。
![デモのキャプチャ](/wp-content/uploads/2008072301-15.png)
Countdown
タイムゾーンも切り替えられる高機能なカウントダウン。
![デモのキャプチャ](/wp-content/uploads/2008111701-24.png)
history
AJAXの履歴を管理。
sponsors