|
|
ホットサンプル
行数:
|
◆ jQueryのTemplatingプラグインの使い方
(#1)
このサンプルは、jQueryのTemplatingプラグインの使い方を解説しています。
ここでは、JSONデータに格納されているパーソナルデータをHTMLのul/li要素にバインドして表示します。テンプレートでJSONデータをバインドするには「{%= element %}」のように「{}」で囲みます。JavaScriptのコードを記述するときは「{% .... %}」で囲みます。
|
◆ jQueryのspriteプラグインでカラスをランダムに移動させる v2
(#2)
このサンプルは、jQueryのspriteプラグインを利用してカラスをランダムに移動させます。カラスをランダムに移動させるには、spRandom()メソッドを使用します。
|
◆ jQueryのzoomImageプラグインでイメージをズームインする
(#3)
このサンプルは、jQueryの
ZoomImage
プラグインを利用してイメージをズームイン／ズームアウトします。サムネイルにマウスを移動してクリックするとズームインします。この状態でイメージを切り替えるには、左右の矢印ボタンをクリックします。ズームインした状態でイメージをクリックするとズームアウトします。
IEを利用しているときは、「このサンプルを編集して試してみる」をクリックして新規ウィンドウからご覧ください。
|
◆ Ajax: 価格.com/コネコネット/ヤフオクの商品を比較して表示する
(#4)
このサンプルは、価格.com/コネコネット/ヤフオクの商品を検索して表示します。サンプルが表示されたら検索窓に商品名を入力して[検索]ボタンをクリックします。タブに検索結果が表示されます。商品のイメージにマウスを移動すると商品名、仕様などが表示されます。イメージをクリックすると対応するサイトに移動します。
|
◆ Ajax: アマゾン/楽天/ヤフオクからパソコンを検索して表示する
(#5)
このサンプルは、アマゾン／楽天／ヤフオクのウェブサービスを利用してパソコンと周辺機器を検索して表示します。サンプルが表示されたら検索窓に商品名などのキーワードを入力して[検索]ボタンをクリックします。検索結果がタブに表示されます。商品のイメージにマウスを移動すると商品名と価格が表示されます。イメージをクリックすると対応するウェブページに移動します。
|
◆ jQueryのCountDownプラグインを利用してカウントダウンを表示する
(#6)
このサンプルは、jQueryの
CountDown
プラグインを利用して特定の日時までのカウントダウンを表示します。ここでは、当日の日付＋２をターゲットの日付にしています。
ラジオボタン「dark」「main」をクリックするとスタイルを切り替えます。
|
◆ リクルートの「じゃらん」の検索結果を３Ｄで表示する
(#7)
このサンプルは、リクルートの「じゃらん」を検索して宿泊施設を表示します。ここでは、jQueryのImageCubeプラグインを利用して検索結果を３Ｄで表示しています。
サンプルが表示されたらドロップダウンリストから場所を選択して[検索]ボタンをクリックします。検索結果が３Ｄで回転します。イメージにマウスを移動すると施設の説明が表示されます。イメージをクリックすると「じゃらん」のサイトに移動します。
|
◆ 株価を折れ線グラフで表示する (LineChart)
(#8)
このサンプルは、Google Visualization APIを利用して株価を折れ線グラフで表示します。株価はYahoo! FinanceからWebサービス経由で取得します。ここでは、Yahoo!, Microsoft, Google, Oracle, IBM, Amazonの株価を表示します。折れ線グラフの●をクリックすると吹き出しに会社コードと株価が表示されます。
|
◆ Google Mapsのマーカーをドラッグした地域を表示する
(#9)
このサンプルは、Google Maps v3のマーカーをドラッグ＆ドロップした場所の地名を表示します。サンプルが表示されたら「黄色」のマーカーをドラッグして任意の場所にドロップしてください。右側にマーカーをドロップした場所の地名と位置が表示されます。
|
◆ Ajax: 価格比較サイトの価格.comから商品を検索して表示する
(#10)
このサンプルは、価格比較サイトの価格.comから商品を検索して最安価格を表示します。サンプルが表示されたらテキストボックスに検索キーを入力して[Find...]ボタンをクリックします。検索結果として商品のサムネイルと最安価格が表示されます。マウスをサムネイルに移動すると商品の説明が表示されます。サムネイルをクリックすると価格.comのサイトに移動します。
|
|