|
|
キーワード別サンプル
行数:
|
◆ jQueryのFlipプラグインを利用して最新のつぶやきを表示する
(#1)
このサンプルは、jQueryの
Flip
プラグインを利用してTwitterの最新のつぶやきを表示します。
サンプルが表示されたらテキストボックスのTwitterのUser Nameを入力して[Submit]ボタンをクリックします。Twitterのアカウントがない方は[Submit]ボタンをクリックしてください。するとボックスがフリップして最新のつぶやきが表示されます。[Return]をクリックすると元のボックスに戻ります。
|
◆ jQueryのライブラリをGoogle CDNからロードするときリスクをゼロにする
(#2)
このサンプルは、jQuery 1.4.2のライブラリをGoogle CDN(Content Delivery Network)からロードして高速化しています。このとき、Google CDNがダウンしてjQueryのライブラリがロードできない場合でも正常に動作するように、自動的にアプリケーションが動作しているウェブサーバーからライブラリをロードします。
Googel/MicrosoftのCDNを利用するときは、ぜひこの機能を組み込んでおくことをお勧めします。
このサンプルを検証するには、「このサンプルを編集して試してみる」をクリックします。
そして、http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
のscriptタグを削除して実行してみてください。
「Welcome to jQuery...」が表示されればＯＫです。
|
◆ jQueryのBetterTooltipプラグインでツールチップをアニメーション化して表示する
(#3)
このサンプルは、jQueryの
BetterTooltip
プラグインを利用してツールチップを表示します。マウスを雲に移動するとツールチップがaアニメーション化されて表示されます。
ツールチップがボックスが半透明で表示されるのがいいですね！
|
◆ jQueryのjPlayerプラグインで複数のMP3ファイルをプレイリストに表示して再生する V3
(#4)
このサンプルは、jQueryのjPlayerプラグインを利用してMP3ファイルを再生します。
ここでは、複数のMP3ファイルをプレイリストに表示して選択できるようにしています。
[<<][>>]ボタンをクリックすると選曲を切り替えます。プレイリストから直接曲を選択して再生することもできます。
|
◆ jQueryのTipTipプラグインでツールチップを表示する
(#5)
このサンプルは、jQueryの
TipTip
プラグインを利用してツールチップを表示します。
サンプルが表示されたらアンカーテキストにマウスを移動してみてください。
ツールチップが表示されます。「AJAX」のアイコンにマウスを移動すると同様にツールチップが表示されます。
このサンプルは、IE以外でご覧ください。
IEの場合、「このサンプルを編集して試してみる」をクリックしてご覧ください。
|
◆ jQueryのLoadingdotdotdotプラグインでAjaxの進捗度をドット(....)で表示する
(#6)
このサンプルは、jQueryの
Loadingdotdotdot
プラグインを利用してAjaxの処理中のメッセージを「Loading....」のようにドットで表示します。処理中を示すのにアニメーションGIFを利用する方法もありますがテキストベースの「....」もいいですよね！
サンプルが表示されたら[Do something]ボタンをクリックしてください。5秒後に処理が完了して「done!」が表示されます。
このサンプルは、IE以外でご覧ください。
最近、IEを無視したプラグインが多いですね。このプラグインもその一つです。
|
◆ jQueryのCross-Domain-AjaxプラグインでYahoo!ファイナンスの株式ランキングを表示する
(#7)
このサンプルは、jQueryの
Cross-Domain-Ajax
プラグインを利用してYahoo!ファイナンスの株式ランキングをスクリーンスクレーピング(Screen Scraping)して表示します。このプラグインは、YQLを利用してクロス・ドメインの問題を回避しています。
|
◆ jQueryのIdle Timeoutプラグインでアイドル状態が一定の時間を経過するとタイムアウトさせる
(#8)
このサンプルは、jQueryのIdle Timeoutプラグインを利用してアイドル状態が一定時間経過すると自動的にタイムアウトさせて特定のページに移動させます。このサンプルでは、アイドル状態が5秒経過するとダイアログにタイムアウトをカウントします。そして、30秒経過するとhttp://jsajax.comのサイトに移動させます。本番で利用するときは、ログインページに移動させます。
|
◆ jQueryのBBQプラグインでAjax環境下でのブラウザの戻るボタンをサポートする
(#9)
このサンプルは、jQueryの
BBQ(Back Button & Query Library)
プラグインを利用してAjaxの環境下でブラウザの戻るボタンをサポートします。
サンプルが表示されたら、タブをクリックしてコンテンツを切り替えてください。
次にブラウザの[戻る]ボタンをクリックします。するとタブのコンテンツが戻ります。
|
◆ jQueryのprettyLoaderプラグインで処理中のアイコンをカーソルの近くに表示する
(#10)
このサンプルは、jQueryの
prettyLoader
プラグインを利用してAjaxローディングアイコンをカーソルの近くに表示します。マウスを移動するとアイコンも自動的に移動します。
アイコンが表示されないときは「このサンプルを編集して試してみる」をクリックしてご覧ください。
|
|