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を使ったサンプル集
|
|
|
April 24th, 2008 at 6:35 am
[...] jQueryサンプル集 (tags: inspiration javascript jquery tutorial) [...]
April 24th, 2008 at 7:00 am
[...] Facebox 画像だけでなく、テキストも表示できま… original article « [...]
April 27th, 2008 at 5:55 am
jQueryに関する情報源のまとめ…
jQueryに関するリファレンスや入門講座、Tips集、プラグイン、サンプル集などの記事のまとめです。
jQuery 【別窓】
jQueryとは – はてなダイアリー 【別窓】
はてなブックマー……
April 29th, 2008 at 5:35 pm
[...] jQueryサンプル集 – DesignWalker [...]
August 7th, 2008 at 2:21 am
jQueryが普及するとWebデザイナの職域が変わるかもしれない…
または不要なものを行毎に削除 –…
September 14th, 2008 at 10:42 pm
[...] jQueryサンプル集 – DesignWalker jQuery 146 Plugins：skuare.net [...]
December 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 [...]
January 23rd, 2009 at 2:18 pm
Lava Lamp Menu でロールオーバー表現を豊かにする…
jQueryを使ってナビゲーションメニューに変化を付ける記事を見つけました。
LavaLamp for jQuery lovers!
さっそくテストしてみました！
テキストをロールオーバーすると、その位置まで画像….