|
|
クールサンプル
行数:
|
◆ jQueryのjqFancyTransitionsプラグインでイメージに各種エフェクトを適用する V2
(#1)
このサンプルは、jQueryの
jqFancyTransitions
プラグインを利用してイメージを切り替えるとき各種エフェクトを適用します。サンプルが表示されるとデフォルトで「curtain alternative」のエフェクトが適用されます。イメージの上の表示されている「wave」「zipper」「curtain」などのリンクをクリックしてイメージがどのように切り替わるか試してみてください。
|
◆ JSONデータをテンプレートにバインドするときコールバック関数を利用する
(#2)
このサンプルは、jQueryのTemplatingプラグインを利用してJSONデータをバインドして表示します。ここでは、商品データを定義したJSONデータをHTMLのul/li要素にバインドしています。商品データ(JSON)をテンプレート(producttemp)にバインドするとき、コールバック関数(rendering, rendered)を利用して削除された商品を除外したり特価の商品の値段をalert()関数で表示するといった処理を行っています。「Product 2」は、削除フラグがついているので表示されません。「Product 3、Product 4」は、特価で提供されていますので「Click here to see it」をクリックすると警告ダイアログに特価が表示されます。
|
◆ 円グラフのスライスを１秒間隔で順番に抜き出す
(#3)
このサンプルは、Google Visualization APIを利用して日課の時間割を円グラフで作成します。ここでは、円グラフのスライスを１秒間隔で抜き出しています。
|
◆ jQueryのspriteプラグインでカラスと背景を移動させる V3
(#4)
このサンプルは、jQueryのspriteプラグインを利用して背景とカラスを同時に移動させます。背景はpan()メソッドで移動させます。カラスはsprite()メソッドで表示します。カラスをランダムに移動させるには、spRandom()メソッドを使用します。これでフラッシュライクな効果を適用できます。
|
◆ Google AJAX Language APIを利用して外国語を日本語に翻訳する
(#5)
このサンプルは、Google AJAX Language APIを利用して外国語を日本語に翻訳します。サンプルのテキストエリアに任意の外国語を入力したら[外国語を日本語に翻訳]ボタンをクリックします。翻訳結果がテキストエリアの下に表示されます。このサンプルは、外国語を自動的に認識して日本語に翻訳します。
英語、スペイン語、ドイツ後、フランス語のサンプルを用意しました。[copy]のリンクをクリックすると左側のセンテンスがテキストエリアにコピーされます。
|
◆ Ajax: アマゾン/楽天/ヤフオクから本を検索して表示する
(#6)
このサンプルは、アマゾン／楽天／ヤフオクのWebサービスを利用して本を検索して表示します。サンプルが表示されたら検索窓に本の書名／カテゴリ／キーワードなどを入力して[検索]ボタンをクリックします。jQuery UIのタブにアマゾン／楽天／ヤフオクから検索した本が表示されます。本のカバーにマウスを移動すると、書名と価格が表示されます。ヤフオクの場合、最新の入札価格が表示されます。
|
◆ jQueryのSticky Notesプラグインを利用してウェブページに付箋を貼る
(#7)
このサンプルは、jQueryの
StickyNotes
プラグインを利用してウェブページに付箋を貼ります。サンプルが表示されるとデフォルトで「Welcome to jsajax.com」の付箋が表示されます。付箋を追加するには、右上の[Add Note]をクリックします。すると、ブランクの付箋が表示されますのでテキストを入力します。付箋の外をクリックすると確定します。
確定したテキストは、ダブルクリックして編集することができます。付箋を消すには左上の[X]をクリックします。付箋はドラッグして任意の場所に移動できます。また、右下のハンドラをドラッグしてリサイズすることもできます。
|
◆ YouTubeからもっとも人気のある動画を検索して表示する V4
(#8)
このサンプルは、YouTubeでもっとも人気のあるビデオを検索して表示します。サンプルが表示されたらドロップダウンから「期間」を選択して[検索]ボタンをクリックします。サムネイルが50件表示されます。左右の矢印ボタンをクリックするとサムネイルがスクロールします。サムネイルをクリックするとズームインしてビデオが表示されますので[再生]ボタンをクリックします。再生中のビデオを切り替えにはビデオの下に表示されている左右の矢印ボタンをクリックします。ズームインボックスを閉じるには右上の[X]ボタンをクリックします。
|
◆ YouTubeからもっとも人気のある動画を検索して表示する V2
(#9)
このサンプルは、YouTubeからもっとも人気のある動画を検索して表示します。サンプルが表示されたらドロップダウンから「期間」を選択して[検索]ボタンをクリックします。検索結果が10件表示されます。サムネイルをクリックするとビデオを再生します。
|
◆ Ajax: Flickrの検索結果をGallerifficプラグインで表示する V2
(#10)
このサンプルは、Flickrの写真を検索してjQueryのGallerifficプラグインで表示します。サンプルの検索ボックスにキーワードを入力したら[検索]ボタンをクリックします。検索結果が120件Gallerifficに表示されます。サムネイルが12個単位でタブに表示されます。タブ[1]-[10]をクリックするとサムネイルが切り替わります。[Prev][Next]をクリックして切り替えることもできます。サムネイルをクリックすると右側に拡大表示されます。
拡大されたイメージを自動的に切り替えるには、左上の[Play Slideshow]をクリックします。手動で切り替えるには右上の[Previous Photo][Next Photo]をクリックします。
|
|