JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

◇jQuery UI: Accordion

このサンプルは、jQuery UIのaccordion()プラグインを使用してアコーディオンを表示します。見出し「Section1-4」をクリックするとコンテンツが展開します。少なくとも１個のコンテンツが常時表示されます。アコーディオンの高さは自動的に調整されます。また、幅はカスタマイズできます。

このサンプルは、jQuery UIのAccordionを利用してアコーディオンを表示します。このアコーディオンは、右下のハンドラ（三角形）をドラッグしてリサイズすることができます。高さを調整するには最下位にあるハンドラ（長方形）をドラッグしてリサイズします。

このサンプルは、jQuery UIのAccordionを利用してアコーディオンを表示します。見出し(Section1-4)をクリックするとコンテンツが展開します。コンテンツが展開している状態で見出し(Section?)をクリックするとコンテンツを折りたたみます。

このサンプルは、jQuery UIのAccordionを利用してアコーディオンを表示します。マウスを見出し(Section1-4)に移動すると自動的にコンテンツが展開します。

このサンプルは、jQuery UIのaccordionを利用してアコーディオンを表示します。ここでは、アコーディオンの見出しに表示するアイコンを「●」にカスタマイズしています。

◇jQuery UI: Datepicker

このサンプルは、jQueryのdatepickerプラグインを使用してカレンダーを表示します。テキストボックスにフォーカスを移動するとカレンダーが表示されますのでマウスで日付を選択します。選択した日付はテキストボックスに表示されます。日付の書式はドロップダウンリストから選択することができます。デフォルト値は「yyyy/mm/dd」です。カレンダーのテーマはアイコンをクリックして選択します。

このサンプルは、jQueryのdatepickerプラグインを使用してカレンダーから日付を選択することができます。 テキストボックスにフォーカスを移動するとカレンダーがポップアップされます。 カレンダーから選択する日付は、範囲を設定して制約することも可能です。ここでは、当日の日付を基準に前後３日分の範囲から選択できるようにしています。

このサンプルは、jQueryのdatepickerプラグインを使用してカレンダーを表示します。テキストボックスにフォーカスを移動するとカレンダーが表示されます。カレンダーの左右のボタンをクリックすると「月」を切り替えることができます。また、ドロップダウンリストから「年」「月」を選択して切り替えることもできます。

このサンプルは、テキストボックスに日付を入力するときカレンダーから日付を選択します。テキストボックスにフォーカスを移動すると３ヶ月分のカレンダーを表示します。カレンダーのテーマはアイコンをクリックして選択することができます。選択したテーマはクッキーに保存しますので、次回再訪問したときに復元します。

このサンプルは、テキストボックスに日付を入力するとき右側のアイコンをクリックしてカレンダーから日付を選択することができます。カレンダーは、jQueryのDatepickerプラグインを使用して表示します。カレンダーのテーマは、ドロップダウンリストから選択してカスタマイズすることができます。カスタマイズしたテーマは、クッキーに保存しますので次回再訪問したときに復元されます。

このサンプルは、jQueryのDatepickerプラグインの角を丸くします。Webページの[Change to rounded corners]ボタンをクリックするとカレンダーの４角を丸くします。角丸にするには、DD_roundies.addRule()メソッドを使用しています。

このサンプルは、代替スタイルシートを宣言して実行時にスタイルシートをダイナミックに切り替えます。サンプルが表示されたらテーマのラジオボタンをクリックしてください。てカレンダーのスタイルが変わります。

このサンプルは、ダイナミックに変更したスタイルシートをクッキーに保存して保持します。次回、サイトを再訪問したときに以前保存したスタイルシートを復元します。スタイルシートを選択したら別ページに移動してから戻ってきて再度表示してみてください。

◇jQuery UI: Dialog

このサンプルは、jQuery UIのdialog()プラグインを利用してヘルプ情報などのダイアログを表示します。 [Open dialog]ボタンをクリックするとダイアログが表示されます。ダイアログのヘッダーをドラッグすると任意の場所に移動することができます。ダイアログ右下のハンドラ（三角形）をドラッグするとリサイズすることができます。

このサンプルは、jQuery UIのdialog()プラグインを利用してモダル型のダイアログを表示します。モダルダイアログが表示されているときは、メインコンテンツをグレーアウトします。ダイアログは移動したり、リサイズすることができます。

このサンプルは、jQuery UIのdialog()プラグインを利用してモダル型のダイアログを表示します。モダルダイアログが表示されているときは、メインコンテンツをグレーアウトします。ダイアログは移動したり、リサイズすることができます。

このサンプルは、jQuery UIのdialog()プラグインを利用してメッセージを表示するモダルダイアログを表示します。モダルダイアログの[OK]をクリックするとダイアログを閉じます。

このサンプルは、jQuery UIのdialog()プラグインを利用して問い合わせのダイアログを表示します。ダイアログには[OK]と[Cancel]のボタンが表示されます。

このサンプルは、jQuery UIのdialog()プラグインを利用して新規アカウントを登録するためのダイアログを表示します。ダイアログが表示されたら、名前、メール、パスワードを入力して [Create an account]ボタンをクリックします。登録を中止するときは[Cancel]ボタンをクリックします。

◇jQuery UI: Progressbar

このサンプルは、jQuery UIのProgressbar()プラグインを利用して進捗グラフを表示します。ここでは、setInterval()関数を利用して1/100秒間隔でグラフを更新します。100%になると０から再開します。

このサンプルは、jQuery UIのProgressbar()プラグインを利用して進捗グラフを表示します。ここでは、setInterval()関数を利用して1/100秒間隔でグラフを更新します。このサンプルは、進捗グラフ右下のハンドラ（三角形）をドラッグして進捗グラフをリサイズすることができます。

◇jQuery UI: Slider

このサンプルは、jQuery UIのslider()プラグインを利用してシンプルなカラーピッカーを表示します。「赤」「緑」「青」のスライダーを移動してお好みのカラーを生成してください。

◇jQuery UI: Tabs

このサンプルは、jQuery UIのtabsプラグインを使用してWebページのコンテンツをタブで切り替えます。[Tab1-3]をクリックするとコンテンツが切り替わります。

このサンプルは、jQuery UIのtabsプラグインを使用してコンテンツをタブで切り替えます。Tab1はページ内にコンテンツを宣言しています。Tab2とTab3は、コンテンツをAjax経由でダイナミックにロードして表示します。Tab2はcontent2.aspx、Tab3はcontent3.aspxをAjax経由でロードして表示します。content2.aspxは2秒、content3.aspxは3秒サーバー側でスリープするようにしています。

このサンプルは、jQuery UIのtabsプラグインを使用してコンテンツをタブで切り替えます。マウスをタブ（見出し）に移動するとコンテンツが表示されます。このサンプルでは、タブをマウスでクリックする代わりにマウスをタブ上に移動するだけでコンテンツを切り替えます。

このサンプルは、jQuery UIのtabsプラグインを使用してコンテンツをタブで切り替えます。[Tab1-3]をクリックするとコンテンツが表示されます。コンテンツが表示されている状態で、再度タブをクリックするとコンテンツを閉じます。

このサンプルは、jQuery UIのtabsプラグインを使用してコンテンツをタブで切り替えます。[Tab1-3]をクリックするとコンテンツが表示されます。タブをドラッグ＆ドロップすると、タブを並べ替えることができます。たとえば、[Tab 1]を最後にするには、[Tab 1]をドラッグして[Tab 3]の後ろにドロップします。

◇jQuery UI: General

このサンプルは、jQuery UIのeffect()プラグインを利用してbounceエフェクトを実装しています。サンプルのボックスの見出し「Bounce」をクリックするとボックスがバウンドします。

このサンプルは、jQuery UIのeffect()プラグインを利用してhighlightエフェクトを実装しています。サンプルのボックスの見出し「Highlight」をクリックするとボックスがハイライトします。

このサンプルは、jQuery UIのeffect()プラグインを利用してpulsateエフェクトを実装しています。サンプルのボックスの見出し「Pulsate」をクリックするとボックスが電球のように点滅します。

このサンプルは、jQuery UIのeffect()プラグインを利用してshakeエフェクトを実装しています。サンプルのボックスの見出し「Shake」をクリックするとボックスが左右にシェイク(振動)します。

このサンプルは、jQuery UIのeffect()プラグインを利用してtransferエフェクトを実装しています。サンプルのボックスの見出し「Transfer」をクリックするとボックスが左下のボックスに吸い込まれるように移動(転写)します。

◇jQuery UI: Show/Hide

このサンプルは、jQuery UIのtoggleプラグインを利用してblindエフェクトを実装しています。ボックスの見出し「Blind」をクリックするとボックスがブラインドを開閉するように消えます。再度クリックするとボックスが表示されます。

このサンプルは、jQuery UIのtoggleプラグインを利用してclipエフェクトを実装しています。ボックスの見出し「Clip」をクリックするとボックスが紙をクリップするように消えます。再度クリックするとボックスが表示されます。

このサンプルは、jQuery UIのtoggleプラグインを利用してdropエフェクトを実装しています。ボックスの見出し「Drop」をクリックするとボックスが左側にドロップするように徐々に消えます。

このサンプルは、jQuery UIのtoggleプラグインを利用してexplodeエフェクトを実装しています。ボックスの見出し「Explode」をクリックするとボックスが破裂(爆発)するように分散して消えます。再度クリックするとボックスが表示されます。

このサンプルは、jQuery UIのtoggleプラグインを利用してfoldエフェクトを実装しています。ボックスの見出し「Fold」をクリックするとボックスが紙を折りたたむように小さくなって消えます。再度クリックするとボックスが表示されます。

このサンプルは、jQuery UIのtoggleプラグインを利用してpuffエフェクトを実装しています。ボックスの見出し「Puff」をクリックするとボックスが火にフッと息を吹きかけるように消えます。再度クリックするとボックスが表示されます。

このサンプルは、jQuery UIのtoggleプラグインを利用してscaleエフェクトを実装しています。ボックスの見出し「Scale」をクリックするとボックスが徐々に縮小しながら消えます。再度クリックするとボックスが表示されます。

このサンプルは、jQuery UIのtoggleプラグインを利用してslideエフェクトを実装しています。ボックスの見出し「Slide」をクリックするとボックスがスライドする（滑る）ように徐々に消えます。再度クリックするとボックスがスライドして表示されます。