このサイトで公開しているjQuery実践サンプルのリンク集です。
jQueryはわずか数行のコードを記述するだけで使い勝手の良いWebインタフェースを追加することができます。
サンプルの見出しの右端に「★」が表示されているサンプルは、リンクにマウスを移動するとツールチップとしてイメージが表示されます。
◆jQuery: メニュー編
jQuery: ドック型メニュー ★
このサンプルは、jQueryのiconDockプラグインを利用してドック型のメニューを表示します。マウスをイメージに移動するとドッグから飛び出します。マウスを遠ざけるとイメージがドックに戻ります。
jQuery: ラバランプ型メニュー ★
このサンプルは、jQueryのLavaLampプラグインを利用してラバランプ型メニューを表示します。マウスを「サイトマップ」上に移動してクリックすると当サイトのホームページが表示されます。
jQuery: ラバランプ型メニュー (Part2)
このサンプルは、jQueryのlavaLamp()プラグインを利用してラバランプ型のメニューを表示します。ここでは、カレントのメニューをボックスで囲みます。
jQuery: ラバランプ型メニュー (Part3)
このサンプルは、jQueryのlavaLamp()プラグインを利用してラバランプ型のメニューを表示します。ここでは、カレントのメニューの下に青の下線を表示します。
jQuery: タブ型メニュー
このサンプルは、jQueryのUI Tabsのプラグインを利用してタブ型メニューを表示します。タブの名称はul/li要素で宣言します。タブのコンテンツはdiv要素で宣言します。
jQuery: ツリー型のメニュー
このサンプルは、jQueryのTreeView()プラグインを利用してツリー型メニューを表示します。[+]をクリックするとノードが展開します。[-]をクリックするとノードを折りたたみます。ノードをクリックするとページを移動します。「Site
Map」を展開して「JavaScript + Ajax」のノードをクリックすると当サイトが表示されます。
jQuery: ツリー型のメニュー (Folder)
このサンプルは、jQueryのtreeView()プラグインを利用してフォルダーツリーを表示します。フォルダのノードを展開するとファイルのノードが展開されます。フォルダを開くとフォルダのイメージが変わります。[Add!]ボタンをクリックすると新規フォルダとアイテムを追加します。
jQuery: ドロップダウン型メニュー(水平）
このサンプルは、jQueryのjdMenu()プラグインを利用してドロップダウン型のメニューを表示します。ここでは、jdMenuを水平方向に表示しています。メニュー項目の右側に「≫」が表示されているときはサブメニューがあることを意味します。
jQuery: ドロップダウン型メニュー(垂直)
このサンプルは、jQueryのjdMenu()プラグインを利用してドロップダウン型のメニューを表示します。ここでは、垂直型のドロップダウンメニューを表示します。
jQuery: コンテキスト型のメニュー
このサンプルは、jQueryのcontextMenu()プラグインを利用してコンテキスト型のメニューを表示します。サンプルの右上に表示されている「DEMO」を右クリックするとコンテキストメニューが表示されます。コンテキストメニューからアイテムを選択するダイアログにメッセージが表示されます。本番では、alert()の代わりに対応する処理を記述します。
jQuery: スライディング型のメニュー
このサンプルは、jQueryのrb_menu()プラグインを利用してスライド型のメニューを表示します。マウスを「menu」上に移動するとメニューがスライドして表示されます。マウスを「menu」の外に移動するとメニューが消えます。
jQuery: アコーディオン型のメニュー
このサンプルは、jQueryのAccordion()プラグインを利用してアコーディオン型のメニューを表示します。[Title?]をクリックするとサブメニューが展開されます。
jQuery: アコーディオン型のメニュー
(Part2)
このサンプルは、jQueryの各種APIを利用してアコーディオン型のメニューを表示します。見出し（タブ）をクリックするとサブメニューが表示されます。
jQuery: アコーディオン型のメニュー (Part3) ★
このサンプルは、jQueryのaccordion()プラグインを利用してアコーディオン型のメニューを表示します。マウスをタブ上に移動すると自動的にサブメニューが展開されます。
◆jQuery: アコーディオン編
jQuery: アコーディオン
このサンプルは、jQueryのhoverAccordion()プラグインを利用してホーバー型のアコーディオンを表示します。マウスをタブ上に移動すると自動的にコンテンツが表示されます。
jQuery: アコーディオンメニュー
このサンプルは、jQueryのhoverAccordion()プラグインを利用してホーバー型のアコーディオンメニューを表示します。マウスをタブ上に移動すると自動的にサブメニューが表示されます。
jQuery: 水平型アコーディオン ★
このサンプルは、jQueryのhorizontalAccordion()プラグインを利用して水平型のアコーディオンを表示します。「Show1-4」をクリックするとコンテンツが開きます。
jQuery: 水平型アコーディオン (Part2) ★
このサンプルは、jQueryのhorizontalAccordion()プラグインを利用して水平型のアコーディオンを表示します。マウスで地球儀のイメージをクリックするとコンテンツが開きます。
jQuery: ポートレット
このサンプルは、jQueryの各種ライブラリを利用してポートレットを表示します。[Expend][Collapse]をクリックするとすべてのコンテンツが展開および折りたたまれます。[Invert]をクリックすると展開/折りみを繰り返します。右端に表示されている[x]をクリックするとコンテンツを消します。[+]をクリックすると表示します。
◆jQuery: テキスト、テキストエリア編
jQuery: Textareaのタブを有効にする
このサンプルは、jQueryのittabs()プラグインを利用してtextareaのタブ機能を有効/無効にします。サンプルが表示されたら[enable tabs
in textarea]をクリックしてタブを有効にします。そして、テキストエリアに文字を入力したら[Tab]キーを押してください。
jQuery: Textareaをリサイズする
このサンプルは、jQueryのResizable()プラグインを利用してtextareaをリサイズします。サンプルが表示されたらtextareaの緑の部分をドラッグして高さをリサイズしてください。
jQuery: ニュースティッカーを表示する
このサンプルは、jQueryのinnerfade()プラグインを利用してニュースティッカーを表示します。ここでは、ul/li要素で宣言されているニュースをランダムに表示します。
jQuery: イメージを切り替える
このサンプルは、jQueryのinnderfade()プラグインを利用してイメージを５秒間隔で切り替えます。イメージを切り替える時間は引数で指定します。ここでは５秒間隔で切り替えています。
◆jQuery: ツールチップ、リンク編
jQuery: ツールチップ(Ajax版)
このサンプルは、jQueryのjTip()プラグインを利用してツールチップを表示します。マウスを「？」上に移動するとツールチップが表示されます。ツールチップの内容はhtmlファイルに格納しておきます。たとえば、パスワードのツールチップは「jtipPassword.htm」に宣言しています。
jQuery: カスタムツールチップ
このサンプルは、jQueryのTooltipDemo()プラグインを利用してツールチップのカラーをカスタマイズして表示します。サンプルの「link」上にマウスを移動するとカスタムツールチップが表示されます。同様にテキストボックス上にマウスを移動するとカスタムツールチップが表示されます。ツールチップは、title属性に設定します。
jQuery: パンチカード(ソーシャルブックマーク版)
このサンプルは、jQueryのpunchcard()プラグインを利用してソーシャルブックマークのリンクをパンチカードのレイアウトでを表示します。マウスをパンチカードのホールに移動するとソーシャルブックマークサイトのツールチップが表示されます。ホールをクリックするとソーシャルブックマークのサイトが新規ウィンドウに表示されます。このプラグインは少ない表示領域に沢山のリンクを表示するときに便利です。ソーシャルブックマークに登録するとパンチカードのホールの色が変わります。つまり、すでにソーシャルブックマークに登録したどうかが分かります。
◆jQuery: ウィンドウ編
jQuery: ポップアップウィンドウ(リサイズ&ドラッグ) ★
このサンプルは、jQueryのinterface()プラグインを利用してポップアップウィンドウを表示します。サンプルの[Open window]をクリックすると緑のポップアップウィンドウが表示されます。ウィンドウの右下をドラッグしてウィンドウをリサイズすることができます。ウィンドウの右上の[-]をクリックすると本文を折りたたみます。[x]をクリックするとウィンドウを閉じます。ウィンドウのヘッダーをドラッグして移動することもできます。
jQuery: モダルダイアログ
このサンプルは、jQueryのjqModal()プラグインを利用してモダルダイアログを表示します。[Close]をクリックするとダイアログが閉じます。
jQuery: ページをブロックする
このサンプルは、jQueryのblockUI()プラグインを利用してウェブページをブロックします。[Run]ボタンをクリックするとwait.aspxページを非同期で呼び出します。wait.aspxの処理中は、メッセージを表示してウェブページをブロックします。wait.aspxの処理が完了したらブロックを解除します。wait.aspxは２秒間スリープします。
jQuery: ダイアログを表示する
このサンプルは、jQueryのblockUI()プラグインを利用してダイアログを表示します。サンプルの[Show Dialog]ボタンをクリックするとダイアログに「Would
you like to continue?」が表示されますので[Yes]をクリックします。すると、wait.aspxを非同期で呼び出します。wait.aspxの処理が完了すると自動的にダイアログを閉じます。wait.aspxはサーバー側で２秒間スリープします。
◆jQuery: ボーダー、コーナー、スタイルシート編
jQuery: ボックスの角をカスタマイズする ★
このサンプルは、jQueryのcorner()プラグインを利用してボックスの角をカスタマイズします。ボックス内に記述されているJavaScriptのコードを実行するとそのボックスが表示されます。
jQuery: カラーピッカー
このサンプルは、jQueryのfarbtastic()プラグインを利用してカラーを選択する機能を実装しています。サンプルの左側から「Color1/2/3」のいずれかを選択したら右側のカラーホイールからお好みのカラーを選択します。このサンプルでは、同時に３個のカラーを選択することができます。
jQuery: 星(★)の数で評価する
このサンプルは、jQueryのstarRating()プラグインを利用して５段階評価します。サンプルの「★」にマウスを移動してクリックします。リセットするときは[-]ボタンをクリックします。
jQuery: スタイルシートを切り替える
このサンプルは、jQueryのstyleSwitch()プラグインを利用して外部ファイルに格納されているスタイルシートを切り替えます。[styles1-3]をクリックすると対応するスタイルシートに切り替えます。カレントのスタイルシートは「Currently
active stylesheet」に表示されます。
◆jQuery: テーブル、グリッド編
jQuery: テーブルの列を並べ替える
このサンプルは、jQueryのtablesorter()プラグインを利用してテーブルの列を並べ替えします。サンプルが表示されたらテーブルの列をクリックしてください。クリックした列を昇順/降順に並べ替えします。
jQuery: テーブルの幅をリサイズする
このサンプルは、jQueryのingrid()プラグインを利用してテーブル（グリッド）の列幅をリサイズします。サンプルが表示されたらグリッドの列見出し（ヘッダー）の列境界線にマウスを移動してドラッグしながら列幅を調整します。「このサンプルを拡大して表示する！」をクリックしてご覧ください。
jQuery: テーブルをページングする
このサンプルは、jQueryのingrid()プラグインを利用してグリッドをページングします。グリッドのフッターにページング用のボタンが表示されていますのでこれらのボタンをクリックしてページングします。グリッドのヘッダーの列見出しをクリックすると列を昇順/降順に並べ替えすることもできます。「このサンプルを拡大して表示する！」をクリックしてご覧ください。
jQuery: テーブルの行/列をハイライトする ★
このサンプルは、jQueryのtablehover()プラグインを利用してテーブルの行/列をハイライトします。サンプルのテーブル上にマウスを移動するとカレントの行／列がハイライトされます。カレントのセルは異なる色で表示されます。
◆jQuery: ドラッグ＆ドロップ編
jQuery: 任意の方向にドラッグする
このサンプルは、jQueryのinterface()プラグインを利用してdiv要素をドラッグします。「Drage me」は任意の方向にドラッグします。ドラッグ中は波線でオブジェクトを表示します。「Gogstly」はゴースト（幽霊）のように移動中のオブジェクトを表示します。「Revent」は移動後ものと場所に戻ります。「Move
only vertically」と「Moved only horizontally」は垂直、水平方向にのみ移動できます。「Drag by handle」は、ハンドラを表示します。「Moved
by grid」は50 x 50の領域内で移動できます。「with cursorAt」はカーソルにある位置にポジショニングしてから移動します。「Drag me
inside my parent」は、親要素内で移動できます。
jQuery: ドロップするときのオプション設定
このサンプルは、jQueryのDraggable()プラグインを利用してオブジェクトをドロップするときに各種オプションを設定します。左側のボックスにドロップするときはドラッグしたオブジェクトが完全にボックス内に移動したときにドロップできるようにします。真中のボックスにドロップするときはドラッグしたオブジェクトがボックスに接触したときにドロップできるようにします。右側のボックスにドロップするときは、ポインターがボックス内に移動したときにドロップできるようにします。ドロップ可能なときはボックスの背景色が変わります。
jQuery:
フォルダーツリーをドラッグ＆ドロップして移動
このサンプルは、jQueryのDraggable(), Droppable()プラグインを利用してツリービューのノードを移動します。ツリービューのノードをドラッグしたら別のノードに移動してみてください。
jQuery: リサイズ＆ドラッグする
このサンプルは、jQueryのjqDrag()とjqResize()プラグインを利用してdiv要素をリサイズ＆ドラッグできるようにします。サンプルのボックスの上に表示されている赤のバーをドラッグするとボックスを移動できます。ボックスの右下の赤のバーをドラッグするとボックスをリサイズできます。
◆jQuery: スライダー編
jQuery: YouTubeのビデオを左右にスライドさせる ★
このサンプルは、jQueryのcodaSlider()プラグインを利用して YouTubeのビデオを左右にスライドさせます。パネルをスライドさせるにはスライド上部に表示されているタブをクリックするか、パネルの左右に表示されている矢印をクリックします。
jQuery: スライダーでイメージを拡大・縮小する
このサンプルは、jQueryのSlider()プラグインを利用してイメージをリサイズします。サンプルのイメージの上部にスライダーが表示されていますのでドラッグして左右に移動します。そうするとイメージがリサイズされます。
jQuery: 水平方向にスライドさせる
このサンプルは、jQueryのaccessibleNewsSlider()プラグインを利用してdiv要素に宣言されているコンテンツ（イメージ＋テキスト）を左右に移動します。[View
All]をクリックするとすべてのコンテンツを表示します。コンテンツを移動するには、左右に表示されている矢印ボタンをクリックします。
jQuery: カラーピッカー ★
このサンプルは、jQueryのColorPicker()プラグインを利用して16進のカラーコードを生成します。緑のアイコンをクリックするとカスタムされたカラーピッカーが表示されます。カラーピッカーを消すには緑のアイコンを再度クリックします。ブルーのアイコンをクリックするとデフォルトのカラーピッカーが表示されます。このカラーピッカーを消すには画面の任意の場所（カラーピッカー以外）をクリックします。
jQuery: スライダーで価格を選択
このサンプルは、jQueryのslider()プラグインを利用して価格の範囲を選択します。サンプルが表示されたら「▲」をドラッグして左右に移動します。左側の「▲」が最長値、右側の「▲」が最大値を選択します。
◆jQuery: スライドショー、イメージギャラリー、サムネイル編
jQuery: スライドショー
このサンプルは、jQueryのslideshow()プラグインを利用してスライドショーを表示します。サンプルが表示されると順番にスライドが表示されます。手動で切り替えるときは、左上の番号[1-4]をクリックします。スライド（イメージ上の）下の両サイドにマウスを移動すると矢印が表示されます。この矢印をクリックして手動で移動することもできます。
jQuery: イメージギャラリー
このサンプルは、jQueryのgallery()プラグインを利用してイメージギャラリーを表示します。サンプルが表示されたら「JQUERY GALLERY」の右側の「COLLECTION
1」をクリックします。すると「GALLERY1-3」が表示されますのでお好きなギャラリーをクリックします。先頭のイメージが表示されたらイメージの上部にマウスを移動します。このギャラリーに登録されているイメージのサムネイルが表示されますので選択します。イメージ上部の左右に表示されている[back]と[next]をクリックして切り替えることもできます。
jQuery: イメージを水平方向にスクロール
このサンプルは、jQueryのjcarousel()プラグインを利用してイメージを水平方向にスクロールします。サンプルが表示されたら左右に矢印キーをクリックしてスクロールします。
jQuery: イメージを垂直方向にスクロール
このサンプルは、jQueryのjcarousel()プラグインを利用してイメージを垂直方向にスクロールします。サンプルが表示されたら上下の矢印キーをクリックしてイメージをスクロールしてください。
jQuery: イメージを水平方向にスクロール(thickbox版)
このサンプルは、jQueryのjcarousel()プラグインを利用してイメージを水平方向にスクロールします。イメージをクリックするとイメージが拡大されて表示されます。
jQuery: イメージをサムネイル化する
このサンプルは、jQueryのjThumb()プラグインを利用してイメージをサムネイル化します。サンプルが表示されたら[Enable]ボタンをクリックします。するとイメージがサムネイル化します。元のサイズに戻すには[Disable]ボタンをクリックします。
◆jQuery: 日付、時間編
jQuery: カレンダーから日付を選択する
このサンプルは、jQueryのdatePicker()プラグインを利用してポップアップカレンダーを表示します。テキストボックスにフォーカスを移動すると自動的にポップアップカレンダーが表示されます。カレンダーから日付を選択すると自動的に閉じます。日付を選択したくないときは[閉じる]をクリックします。
jQuery: マウスで時刻を入力する
このサンプルは、jQueryのtimeEntry()プラグインを利用して時刻をマウスで選択できるようにします。サンプルが表示されたら２番目の「スピンをカスタマイズ」のスピンにマウスを移動します。ツールチップが表示されますので指示にしたがって操作してください。スピンの真ん中にマウスを移動すると「現在の時刻」と表示されますのでクリックします。するとテキストボックスに現在の時刻が表示されます。時刻の[HH:MM]を増減させるには、スピンの「左のフィールドへ」「右のフィールドへ」をクリックします。「HH」「MM」に位置づけします。そしてスピンの「加算」「減算」をクリックします。これで「HH:MM」が変わります。「AM|PM」も同様の手順で切り替えます。
jQuery: カウントダウン
このサンプルは、jQueryのcountdown()プラグインを利用してカウントダウンを表示します。ここでは、「誕生日まで」と「試験まで」などのカウントダウンを表示しています。
jQuery: タイマー
このサンプルは、jQueryのtimers()プラグインを利用して各種イベントを登録します。「Unbounded everyTime」では、everyTime()メソッドを使用して１秒間隔でカウントします。結果はp要素に格納して表示します。「Controlled
everyTime」では、[start]と[stop]でイベントをコントロールします。 [start]をクリックしたときは、everyTime()メソッドで１秒間隔でイベントを発生させてli要素(New
One)を追加します。[stop]をクリックするとstopTime()メソッドを実行してイベントを終了させます。
◆jQuery: フォーム、検証、進捗状況編
jQuery: 入力データを検証する
このサンプルは、jQueryのvalidate()プラグインを利用してフォームに入力したデータを検証します。サンプルの[Submit]ボタンをクリックするとエラーメッセージが表示されます。「Name」には少なくとも２文字以上入力します。「E-Mail」にはメールアドレスを入力します。メールアドレスが不正のときはエラーを表示します。「URL」にはホームページのURLを入力します。URLが不正のときはエラーを表示します。
jQuery: すかし文字を表示する
このサンプルは、jQueryのWatermark()プラグインを利用してテキストボックスに「ヘルプ情報」を表示します。テキストボックスがフォーカスを取得すると「ヘルプ情報」が消えます。テキストボックスにデータを入力すると「ヘルプ情報」が消えます。何も入力しないときは「ヘルプ情報」を表示します。
jQuery: 入力したデータをクッキーに保存する
このサンプルは、jQueryのpin()プラグインを利用してフォームから入力／選択した情報をクッキーに保存して復元します。サンプルの「Field1」と「Field3」の右側にピンが表示されています。データを入力／選択した後にピンをオンにするとそのデータがクッキーに保存されます。次回、このフォームを表示したときピンをオンにしたデータが復元されます。
jQuery: 複数のドロップダウンリストを連動させる
このサンプルは、jQueryで独自の関数を作成して複数のドロップダウンリストを連動させます。サンプルに３個のドロップダウンリストが表示されいますが、左側から順番にアイテムを選択します。２番目と３番目のアイテムには自動的に関連するものが表示されます。
jQuery: 進捗状況を表示する
このサンプルは、jQueryのprogressbar()プラグインを利用して進捗状況を棒グラフで表示します。サンプルの[star]ボタンをクリックすると進捗グラフを表示します。
[stop]をクリックすると停止します。[reset]をクリックすると進捗グラフを初期化します。