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を使ったサンプル集
|
|
|
4月 24th, 2008 at 6:35 AM
[...] jQueryサンプル集 (tags: inspiration javascript jquery tutorial) [...]
4月 24th, 2008 at 7:00 AM
[...] Facebox 画像だけでなく、テキストも表示できま… original article « [...]
4月 27th, 2008 at 5:55 AM
jQueryに関する情報源のまとめ…
jQueryに関するリファレンスや入門講座、Tips集、プラグイン、サンプル集などの記事のまとめです。
jQuery 【別窓】
jQueryとは – はてなダイアリー 【別窓】
はてなブックマー……
4月 29th, 2008 at 5:35 PM
[...] jQueryサンプル集 – DesignWalker [...]
8月 7th, 2008 at 2:21 AM
jQueryが普及するとWebデザイナの職域が変わるかもしれない…
または不要なものを行毎に削除 –…
9月 14th, 2008 at 10:42 PM
[...] jQueryサンプル集 – DesignWalker jQuery 146 Plugins：skuare.net [...]
12月 12th, 2008 at 6:14 AM
[...] 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 [...]
1月 23rd, 2009 at 2:18 PM
Lava Lamp Menu でロールオーバー表現を豊かにする…
jQueryを使ってナビゲーションメニューに変化を付ける記事を見つけました。
LavaLamp for jQuery lovers!
さっそくテストしてみました！
テキストをロールオーバーすると、その位置まで画像….
7月 15th, 2009 at 9:24 AM
[...] まぁ同じです（笑） ちょっと違うのはjQueryを使ってるとこ jQuery – jQueryサンプル集 このjQuery を使ったWordPress [...]
10月 9th, 2009 at 6:39 AM
デザインセンスのない自分にとって
このサイトのサンプルは非常に助かりました。
ありがとうございます。
1月 12th, 2010 at 9:27 PM
[...] ▼参考 http://semooh.jp/jquery/ http://www.designwalker.com/2008/04/jquery.html [...]
6月 6th, 2010 at 11:39 AM
英語が苦手なので、jQueryの便利なものを探すのも苦労していたのですが、わかりやすく画像入りで紹介されてあって、非常に参考になりました。写真を表示するときに取り入れるだけでもかわいくできそうです。ありがとうございます！