jQueryサンプル集

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

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

Lightbox, Modal Window関連

jQuery lightBox plugin

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


jQuery lightBox plugin

Facebox

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


Facebox

prettyPhoto a jQuery lightbox clone

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


prettyPhoto a jQuery lightbox clone

NyroModal

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


NyroModal

SimpleModal

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


SimpleModal

画像関連

jQZoom

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


jQZoom

jQuery virtual tour

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


jQuery virtual tour

Photo Slider

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


Photo Slider

jQuery Cycle Plugin

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


jQuery Cycle Plugin

jCarousel

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


jCarousel

jCarousel Lite

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


jCarousel Lite

jQuery Gallery Scroller

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


jQuery Gallery Scroller

Drop Shadow jQuery Plugin

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


Drop Shadow jQuery Plugin

メニュー関連

IconDock

MacのDock風なメニュー


IconDock

LavaLamp for jQuery lovers!

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


LavaLamp for jQuery lovers!

Sliding Menu

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


Sliding Menu

SuckerFish Style

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


SuckerFish Style

Accordion

アコーディオンのUI


Accordion

フォーム関連

jNice, styled forms

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


jNice, styled forms

Select Box replacement

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


Select Box replacement

jQuery Checkbox

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


jQuery Checkbox

jquery.combobox

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


jquery.combobox

focus fields

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


focus fields

ToggleFormText plug-in

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


ToggleFormText plug-in

テーブル関連

Tablesorter

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


Tablesorter

Table Drag and Drop JQuery plugin

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


Table Drag and Drop JQuery plugin

HeatColor

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


HeatColor

その他お役立ち

jVariations

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


jVariations

Jquery Wizard Plugin

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


Jquery Wizard Plugin

jQuery clueTip

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


jQuery clueTip

jQuery Chart Plugin

チャートのプラグイン


jQuery Chart Plugin

jQuery color picker plug-in

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


jQuery color picker plug-in

Color Picker

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


Color Picker

Progress Bar Plugin

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


Progress Bar Plugin

お役立ちjQueryまとめ

50+ Amazing Jquery Examples- Part1

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


50+ Amazing Jquery Examples- Part1

The ultimate jQuery Plugin List

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


The ultimate jQuery Plugin List

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

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


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

jQueryを使ったサンプル集

デザインblogランキング

コメント 12 Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



12 Responses to “jQueryサンプル集”

  1. links for 2008-04-24 « Bluebeck blog Says:

    […] jQueryサンプル集 (tags: inspiration javascript jquery tutorial) […]

  2. 次なるもの » Blog Archive » jQueryサンプル集 - DesignWalker Says:

    […] Facebox 画像だけでなく、テキストも表示できま… original article « […]

  3. まとめデータベース.jp Says:

    jQueryに関する情報源のまとめ…

    jQueryに関するリファレンスや入門講座、Tips集、プラグイン、サンプル集などの記事のまとめです。

    jQuery 【別窓】

    jQueryとは – はてなダイアリー 【別窓】

    はてなブックマー……

  4. JSPT - jQueryサンプル集 Says:

    […] jQueryサンプル集 – DesignWalker […]

  5. 北から南や西を見て思うこと Says:

    jQueryが普及するとWebデザイナの職域が変わるかもしれない…

    または不要なものを行毎に削除 –…

  6. 今日の一歩は明日の一歩 - ホームページ作成のDETELU - jQueryを使ってみよう。(基本編 イベント) Says:

    […] jQueryサンプル集 – DesignWalker jQuery 146 Plugins:skuare.net […]

  7. ウィズダム・デザイン » Blog Archive » jQueryサンプル集 Says:

    […] jQueryサンプル集 金曜日, 12 月 12th, 2008 | Author: wisdom http://www.designwalker.com/2008/04/jquery.html Tags: Ajax, JavaScript, jQuery Category: 未分類 You can follow any responses to this entry […]

  8. Ys DESIGN Says:

    Lava Lamp Menu でロールオーバー表現を豊かにする…

    jQueryを使ってナビゲーションメニューに変化を付ける記事を見つけました。

    LavaLamp for jQuery lovers!

    さっそくテストしてみました!
    テキストをロールオーバーすると、その位置まで画像….

  9. WordPress – [jQuery-Pagebar] を使ってみた « North Wind Says:

    […] まぁ同じです(笑) ちょっと違うのはjQueryを使ってるとこ jQuery – jQueryサンプル集 このjQuery を使ったWordPress […]

  10. ebi Says:

    デザインセンスのない自分にとって
    このサイトのサンプルは非常に助かりました。
    ありがとうございます。

  11. jQueryとは? | andu-web Says:

    […] ▼参考 http://semooh.jp/jquery/ http://www.designwalker.com/2008/04/jquery.html […]

  12. nob Says:

    英語が苦手なので、jQueryの便利なものを探すのも苦労していたのですが、わかりやすく画像入りで紹介されてあって、非常に参考になりました。写真を表示するときに取り入れるだけでもかわいくできそうです。ありがとうございます!

この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ