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

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

jQueryのプラグイン100選 -2009年

100以上ありますが、どれも秀逸なのでご了承ください。

カルーセル・ニュースティッカー関連

デモのキャプチャ

Agile Carousel
打ち出しをフェードで切り替えるカルーセル。

デモのキャプチャ

jquery.scrollable
ホイール・クリック・キーボード操作にも対応した、パネルをスクロールする高性能なスクリプト。

デモのキャプチャ

Accessible Slideshow
アクセシブルなスライドショー。

デモのキャプチャ

bxSlider
三種類のコンテンツスライダーを実装。

デモのキャプチャ

horinaja
マウスホイールにも対応したカルーセル。

デモのキャプチャ

Infinite Carousel
パネルがスライドするシンプルなカルーセル。

デモのキャプチャ

News Ticker con jQuery
フェードで表示・非表示するニュースティッカー。

デモのキャプチャ

jCarousel Lite
軽量のカルーセル。

デモのキャプチャ

Moving Boxes
ズーム機能付きのカルーセル。

デモのキャプチャ

Agile Carousel
パネルをダイナミックにスライド。

デモのキャプチャ

Start/Stop Slider
パネルをクロスにスライド。

デモのキャプチャ

Easy Slider
自動スライドにも対応、デザインのカスタマイズが可能なコンテンツスライダー。

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

デモのキャプチャ

Image Rotator
スタイリッシュな画像ギャラリー。

デモのキャプチャ

GalleryView
インターフェイスが豊富な画像ギャラリー。

デモのキャプチャ

Slideshow JS
フェードで切り替わる、アクセシブルな画像ギャラリー。

デモのキャプチャ

dumbcrossfade
打ち出し画像をフェードで次々に変更します。

デモのキャプチャ

Ultimate Fade-in slideshow
フェードで画像を切り替えるギャラリー。

デモのキャプチャ

jQuery Gallery Slider Plugin
ダイナミックにスライドする画像ギャラリー。

デモのキャプチャ

Beautiful jQuery sliders
洗練されたインターフェイスの画像ギャラリー。

デモのキャプチャ

Image Slide Show with Semi-Transparent Caption
半透明のキャプション表示がかっこいい画像ギャラリー。

デモのキャプチャ

z-index gallery
画像の重なり順を変更する画像ギャラリー。

デモのキャプチャ

Creating a polaroid photo viewer with CSS3
ポラロイド写真を散らかしたようなギャラリー。傾きはSafari, Chromeのみ。

デモのキャプチャ

Sliding Image Gallery
画像をスライド・拡大表示するギャラリー。

デモのキャプチャ

slideView
動きが面白い画像のスライドショー。

デモのキャプチャ

BigPicture
パネル表示やギャラリーにも対応した、画像拡大スクリプト。

デモのキャプチャ

ColorBox
UIが豊富な軽量の画像拡大スクリプト。

デモのキャプチャ

piroBox
イージングのモーションがかっこいい画像拡大スクリプト。

デモのキャプチャ

TopUp
拡大時のエフェクトも豊富な画像を拡大表示するLightbox。

デモのキャプチャ

AnythingZoomer
画像もテキストも何でも拡大表示。

デモのキャプチャ

zooma
画像の一部を拡大表示します。

デモのキャプチャ

Zoomple
画像の一部を拡大表示します。

デモのキャプチャ

JQZoom
画像の一部を拡大表示。

デモのキャプチャ

uBox
イージング機能付き、画像をアニメーションで拡大表示。

デモのキャプチャ

Before/After
2枚の画像をバーでスライドして切り替え。

ナビゲーション関連

デモのキャプチャ

SpriteMenu
CSSスプライトのナビゲーションにスライドやフェードを追加。

デモのキャプチャ

Buttons like Windows 7
Windows7風の光源が移動するボタン。

デモのキャプチャ

Very Long Dropdown Menus
長いドロップダウンを省スペースで表示します。

デモのキャプチャ

jSlickmenu
CSS3を使った、ちょっと面白いナビゲーション。

デモのキャプチャ

Sexy Drop Down Menu
セクシーなドロップダウン型のナビゲーション。

デモのキャプチャ

Acorrdion With Fade
フェードエフェクトを伴ったアコーディオン。

デモのキャプチャ

Dropdown, iPod Drilldown, and Flyout styles
軽快に動作するドロップダウン、ドリルダウン、フライアウト型のナビゲーション。

デモのキャプチャ

jQuery and CSS menu this is really simply one
選択項目が拡大するシンプルなナビゲーション。

デモのキャプチャ

animateToSelector
ホバーでアニメーションする、ナビゲーション。

デモのキャプチャ

Animated Drop Down Menu with jQuery
アニメーションで開閉し、うにょうにょするナビゲーション。

デモのキャプチャ

FastFind Menu
iPoneのドリルダウン型のフロートするナビゲーション。

デモのキャプチャ

Smooth Animated Menu
スムーズなアニメーションで開くナビゲーション。

デモのキャプチャ

jQuery Pagination
ページネーションの生成。

デモのキャプチャ

pagination system
長いコンテンツをページネーションで分割。

デモのキャプチャ

Footnotes
注釈を指定位置に自動配置。

タブ関連

デモのキャプチャ

tabswitch
パネルの表示方法を切り替えられるタブ。

デモのキャプチャ

Custom AJAX Tabs
AJAXに対応したタブコンテンツ。

デモのキャプチャ

Organic Tabs
アニメーションで収縮するタブコンテンツ。

デモのキャプチャ

Sliding Tab Menu for Sidebar
複数のパネルがスライドして切り替わるタブUI。

デモのキャプチャ

Simple Tabs
リスト要素で実装したフェードで切り替わるシンプルなタブ。

デモのキャプチャ

Sliding Tab Menu for Sidebar
パネルがアニメーションでスライドするタブ。

デモのキャプチャ

Tabbed Content Rotator
自動表示にも対応したタブコンテンツ。

デモのキャプチャ

Fly Tabs
水平・垂直・ネストなどユニークなタブを実装。

パネル・ボックス関連

デモのキャプチャ

SimpleModal
シンプルだけどカスタマイズに富んだモーダルボックス。

デモのキャプチャ

flips
パネルを多彩なアニメーションでスライド。

デモのキャプチャ

Image Overlay
テキストなどのパネルを画像の上にオーバーレイ表示します。

デモのキャプチャ

jScroller
パネルを水平・垂直にスライド表示。

デモのキャプチャ

Sexy Vertical Sliding Panel
CSS3を使った、ダイナミックにスライドするパネル。

デモのキャプチャ

Gritter
パネルを表示。

デモのキャプチャ

Mop Box
移動可能なコンテンツ表示ボックス。

デモのキャプチャ

QuickFlip
くるっとパネルを回転。

デモのキャプチャ

Slide box
ページの端のタブをクリックすると、パネルをスライド表示。

デモのキャプチャ

GX
パネルの開閉・移動・グラデーション・フェードなどのアニメーション。

デモのキャプチャ

Simple Toggle
アニメーションでスライドするシンプルなパネル。

デモのキャプチャ

Slinky Slider
軽快なアニメーションでスライドするアコーディオン型のパネル。

デモのキャプチャ

boxy
ボックスを表示、オプションが豊富。

デモのキャプチャ

Dynamic FAQ
アニメーションでパネル表示。

デモのキャプチャ

pageSlide
ページをダイナミックにスライド。

デモのキャプチャ

Page Peel
ページを雑誌のようにめくる。

デモのキャプチャ

The Sexy Curls
ページをセクシーにカール。

角丸関連

デモのキャプチャ

Creating rounded corners
画像無しで角丸を実装。

デモのキャプチャ

jQuery Corners
四辺の表示やサイズなど細かい調整ができる角丸。

デモのキャプチャ

Liquid Canvas
canvasで角丸を表示。

デモのキャプチャ

Round Corners
画像を使用せずに、四辺で異なる角丸を。

ツールチップ関連

デモのキャプチャ

qTip
デザインも豊富でカスタマイズに優れたツールチップ。

デモのキャプチャ

clueTip
オプションが豊富なツールチップ。

デモのキャプチャ

Mop Tip
デザインがかわいいツールチップ。

デモのキャプチャ

Better Tooltip
表示のアニメーションがかわいいツールチップ。

デモのキャプチャ

Content Rich Tooltip with JSON
リッチなツールチップ。

デモのキャプチャ

Simpletip
シンプルながら多機能なツールチップ。

デモのキャプチャ

Popup Bubble
ふんわりとポップアップを表示。

デモのキャプチャ

vTip
リンクだけでなく、画像、divなどにもツールチップ。

レイアウト補助関連

デモのキャプチャ

Browser size aware content scaling
ブラウザのサイズの合わせてレイアウトを自動補正。

デモのキャプチャ

Smart Columns
ページ幅に合わせて、カラムの数とサイズを自動調整。

デモのキャプチャ

jQuery Masonry
レンガを積むようなレイアウト。

デモのキャプチャ

Resizing Images Based On Browser Window Size
ブラウザのサイズに合わせて画像をリサイズ。

デモのキャプチャ

AjaxScroll
MSN Live SearchのようなAJAX対応のスクロールコンテンツ。

デモのキャプチャ

The EqualHeights jQuery Plugin
異なるカラムの高さを揃える。

デモのキャプチャ

CSS Horizontal And Vertical Align
天地左右の中央に配置。

デモのキャプチャ

vertical align center
垂直方向のド真ん中に配置。

その他UI関連

デモのキャプチャ

Accessible News Slider
スムーズなアニメーションが気持ちいい、アクセシブルなスライダー。

デモのキャプチャ

Ajaxify
さまざまなAJAXコンテンツを実装。

デモのキャプチャ

delay
タイミングをコントロール。

エフェクト関連

デモのキャプチャ

Realistic Hover Effect
ホバー時の影や鏡面効果をリアルに。

デモのキャプチャ

Blend
ホバー時にアニメーションでエフェクト。

デモのキャプチャ

Scrolling Parallax
スクロールバーとマウスホイールに対応したパララックス。

デモのキャプチャ

DivCorners
divを入れ子にしないで四辺をグラフィカルに。

デモのキャプチャ

Image Cube
画像やテキストの立方体を回転表示。

デモのキャプチャ

backOpacity
背景の不透明度を設定。

デモのキャプチャ

Supersized
背景画像をブラウザのサイズに合わせ、スライドショーに。

デモのキャプチャ

CSS Multiple Backgrounds / Background Layering with jQuery
一つの要素に複数の背景を自由に配置。

デモのキャプチャ

jQuery Background Canvas drawing
canvasで背景を表示。

デモのキャプチャ

Background-Position Animation
背景画像をアニメーション。

デモのキャプチャ

Background canvas
画像を使用しないで、タブやグラデーションなど背景をCanvasで描画。

デモのキャプチャ

borderImage
ボーダーを画像に。

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

デモのキャプチャ

スムーズ ページスクローラー
ページ内アンカーにスムーズスクロール。

デモのキャプチャ

Fancy Gestures
オリジナルのマウスジェスチャーを設置。

デモのキャプチャ

Animated Alphabet using Keypress Events
Keypressイベントの取得。

デモのキャプチャ

Cheat Code
コナミコマンドなど秘密のコマンドを埋め込める。

デモのキャプチャ

Collapsible Drag & Drop Panels
iGoogleのようにパネルをドラッグ&ドロップで移動。

デモのキャプチャ

Easy Widgets
iGoogleのようにパネルの編集・移動が可。

デモのキャプチャ

Sortable Columns
iGoogleのようにボックスをドラッグ&ドロップで移動。

デモのキャプチャ

Endless Scroll
スクロールをエンドレスに。

デモのキャプチャ

Special scroll events
スクロールイベントの取得。

デモのキャプチャ

FixClick
クリックとダブルクリックを正確に取得。

デモのキャプチャ

spinTheWheel
ダイナミックにホイールしてアクセス。

デモのキャプチャ

Fun with Overflows
ドラッグやホイール操作で水平スクロール。

テーブル・リスト関連

デモのキャプチャ

Chromatable
既存のテーブルのヘッダを固定表示に。

デモのキャプチャ

ListMenu
大量のリストをコンパクトにまとめます。

デモのキャプチャ

Expand table rows
折りたたみ表示できるテーブル。

デモのキャプチャ

Simple FAQ
検索機能もついた、パネルが開閉するFAQ。

デモのキャプチャ

sliding menu revisited
リスト要素のパネルがスライドして拡張。

デモのキャプチャ

Easy Display Switch
リストの表示スタイルをアニメーションで切り替え。

デモのキャプチャ

Adaptable view
リストの表示形式を変更。

デモのキャプチャ

DataTables 1.4
ソート・検索・ハイライトなどが可能な高性能データテーブル。

デモのキャプチャ

Table rows as clickable anchors
テーブルの列をハイライト表示。

デモのキャプチャ

Table Pagination
テーブルにページ送り機能を設置。

デモのキャプチャ

TinySort
テーブルやリストのデータをソート。

フォーム関連

デモのキャプチャ

inline form validation
フォームの入力をリアルタイムにチェック。

デモのキャプチャ

jQuery Watermark
フォームの入力支援。

デモのキャプチャ

iPhone-like password fields
パスワードの最後の一文字だけ表示。

デモのキャプチャ

fullTextArea
テキストエリアの入力時にエリアを拡大します。

デモのキャプチャ

autoResize
テキスト量に合わせてtextareaを自動リサイズ。

デモのキャプチャ

Tabs in Textarea
textareaでタブが使用できるように。

デモのキャプチャ

Price Format
金額を整形、カスタマイズ可。

デモのキャプチャ

Safari Searcher
検索ボックスをSafari風のデザインに自動変更。

デモのキャプチャ

CoolInput
インプットエリアにテキストやアイコンなどを表示します。

デモのキャプチャ

image combobox
セレクトにアイコンを配置して分かりやすく。

デモのキャプチャ

Radiobutton- und Checkbox-Replacement
チェックボックスとラジオボタンをセクシーに。

デモのキャプチャ

Date Picker
インターフェイスも多彩、日付入力支援。

デモのキャプチャ

Date Range Picker
日付入力の支援。

デモのキャプチャ

Select Cuts Off Options In IE
IEでも全部見えるように。

デモのキャプチャ

Make a Select's Options Printable
セレクトボックス内のデータも印刷できるように。

スタイルシート関連

デモのキャプチャ

Sizzle
CSS3もサポートしたセレクタエンジン。

デモのキャプチャ

Auto line-height
フォントサイズに相対的なline-heightを自動で適用。

デモのキャプチャ

Simple Stylesheet Switcher
シンプルなスタイルシートの切り替え。

デモのキャプチャ

Simple Text Resizer
テキストのサイズを変更するシンプルなリサイザー。

デモのキャプチャ

PfeLoader
スタイルシートで配置した画像もスキャンするプリローダー。

コンテンツ生成

デモのキャプチャ

Automatically generate table of contents
指定した要素(hnなど)を抜き出しで目次を自動作成。

デモのキャプチャ

Smart Wizard
ステップごとにパネルを順番に表示するウイザードコンテンツ。

デモのキャプチャ

jMonthCalendar
イベントも書き込めるカレンダー。

デモのキャプチャ

Fancy Quotes
引用を評価するファンシーなシステム。

デモのキャプチャ

Sexy Vote
セクシーな投票システム。

デモのキャプチャ

jCart
ショッピングカート(要PHP)。

デモのキャプチャ

Building a Clickmap with PHP
PHPも使用して、クリックマップ。

その他

デモのキャプチャ

Mapbox
Googleマップのように地図を拡大縮小移動。

デモのキャプチャ

Get URL parameters & values with jQuery
URLパラメータとバリューを取得します。

デモのキャプチャ

Internal Links with Favicon
同一サイト内のリンクにアイコン表示。

デモのキャプチャ

jPlayer
ウェブページにMP3プレイヤーを設置。

デモのキャプチャ

Music Player
ミュージック プレイヤー。

デモのキャプチャ

Pixastic
画像のレタッチや編集。

デモのキャプチャ

Jcrop
画像をクロップ。

デモのキャプチャ

jQuery browser plugin detection
ブラウザのプラグインを検出。

デモのキャプチャ

browser detection
プラグインを検出します。

デモのキャプチャ

Ajax Manager
AJAXのリクエストとレスポンスを管理。

デモのキャプチャ

xLazyLoader
JS, CSS, 画像ファイルのローダー。

top of page

©2017 coliss