JavaScript + Ajax 新着サンプルトップ50

検索結果の件数を設定

このサンプルは、Google Search APIを利用してローカル、ウェイブ、ブログ、ニュース、本などの検索結果をタブに表示します。検索結果を表示する件数は最大に設定しています。

検索結果をタブに表示

このサンプルは、Google AJAX Search APIを利用して検索結果をタブに表示します。サンプルが表示されたら検索窓にキーワードを入力して[検索]ボタンをクリックします。検索結果がタブに表示されます。ここでは、ローカル、ウェブ、ブログ、ニュース、ブック、Patentの検索結果を表示します。

ウェブを検索する

このサンプルは、Google Search APIを利用して検索窓に入力したキーワードを検索して結果を表示します。デフォルトで１件の検索結果を表示します。「ウェブ」の右に表示されているアイコンをクリックすると複数の検索結果を表示することができます。[検索]ボタンの右の[x]をクリックすると、検索結果を消去します。

jQuery.trim(str)

このサンプルは、jQueryのtrim()APIを使用してテキストの前後に含まれている空白を除去します。サンプルの[trim()テスト]ボタンをクリックするとtrim()のテスト結果が表示されます。

jQuery.browser.version

このサンプルは、jQuery.browser.versionを使用してブラウザのバージョン番号を表示します。サンプルが表示されるとWebページにブラウザのバージョン番号が表示されます。お使いのブラウザがIEなら、「6.0」「7.0」のように表示されます。

jQuery.browser

このサンプルは、jQuery.browserを使用してブラウザの情報を取得して表示します。サンプルが実行されるとお使いのブラウザの「version」、「種類」が表示されます。

unload(fn)

このサンプルは、jQueryのunload()イベントハンドラを利用してWebページがアンロードされるときにメッセージを表示します。サンプルが表示されたら「jsajax.com」のリンクをクリックしてください。jsajax.comのサイトに移動する前に「Bye now!」のメッセージが表示されます。

submit(fn)

このサンプルは、jQueryのsubmit()イベントハンドラを利用してテキストボックスに入力した値をチェックします。サンプルのテキストボックスに「correct」を入力して[クエリ送信]ボタンをクリックすると「Validated...」が表示されます。「incorrect」を入力するとエラーメッセージ「Not Valid!」が表示されます。

mouseover(fn)

このサンプルは、jQueryのmouseover()イベントハンドラを利用してイベントが発生したときメッセージを表示します。サンプルのボックス上にマウスを移動すると「mouse over」が表示されます。マウスをボックスの外に移動すると「mouse out」が表示されます。

mouseout(fn)

このサンプルは、jQueryのmouseout()イベントハンドラを利用してイベントが発生したときメッセージを表示します。サンプルのボックス上にマウスを移動すると「mouse over」が表示されます。マウスをボックスの外に移動すると「mouse out」が表示されます。

mousemove(fn)

このサンプルは、jQueryのmousemove()イベントハンドラを利用してマウスの位置(x,y)を表示します。サンプルが表示されたらボックス上のマウスを左右上下に移動してみてください。マウスの位置(x,y)が表示されます。

右側にメニューを表示

このサンプルは、検索エンジンの最適化(SEO)を考慮してナビゲーションメニューを本文の右側に表示します。検索エンジンは、bodyタグの直後のコンテンツを重要視しますので本文がHTMLソース上先頭になるように配置します。

mouseup(fn)

このサンプルは、jQueryのmouseup()イベントハンドラを利用してテキストをクリックしたときにメッセージを表示します。サンプルが表示されたら「Press mouse and release here.」をクリックしてからリリースしてください。「Mouse up」が赤で表示されます。

mousedown(fn)

このサンプルは、jQueryのmousedown()イベントハンドラを利用してテキストをクリックしたときにメッセージを表示します。サンプルが表示されたら「Press mouse and release here.」をクリックしてください。「Mouse down」が青で表示されます。

blur(fn)

このサンプルは、jQueryのblur()イベントハンドラを利用してテキストボックスがフォーカスを喪失したとき背景色を「白」に書き換えます。サンプルのテキストボックスをクリックすると背景色が「黄」に変わります。別のテキストボックスにカーソルを移動すると直前のテキストボックスの背景色がデフォルトの「白」に戻ります。

focus(fn)

このサンプルは、jQueryのfocus()イベントハンドラを利用してテキストボックスがフォーカスを取得したとき背景色を「黄色」に書き換えます。サンプルが表示されたら「Name」のテキストボックをクリックしてみてください。背景色が黄色に変化します。

dblclick(fn)

このサンプルは、jQueryのdblclick()イベントハンドラを利用して長方形の背景色を書き換えます。サンプルが表示されたら「青」の長方形をダブルクリックしてください。長方形の背景色が「黄」に変わります。

左側にメニューを表示(CSS版)

このサンプルは、スタイルシートを使用してメインコンテンツの下に配置されているナビゲーションメニューを左上に表示します。メニューをメインコンテンツの下に配置すると、本文の重要なキーワードが検索エンジンにインデックスしやすくなります。

イメージを置換する

このサンプルは、jQueryのattr()APIを利用してimg要素のイメージを置換します。サンプルが表示されたら画面をスクロールしてサムネイルに移動してください。サムネイルをクリックすると、そのイメージが拡大されて表示されます。

左側にメニューを表示

このサンプルは、右側に配置したナビゲーションメニューを左側に表示させます。SEO(検索エンジンの最適化）を考慮すると、本文はbodyタブの直後に配置するのが効果的です。ところが、ナビゲーションメニューを左側に表示させるとbodyタグの直後がメニューになってしまいます。ここでは、table要素のトリックを利用して右側に配置したメニューを左側に表示します。具体的なメニューの配置は、ソースコードを参照してください。

WordPressのコメント管理機能を実装する

このサンプルは、jQueryのanimate()APIを利用してWordPressのコメント管理機能を実装しています。コメントの[削除]をクリックすると、そのコメントを非表示にします。[不承認]をクリックしたときは、コメントをグレーアウトします。[スパム]をクリックするとそのコメントを非表示にします。スパムとして認識されたコメントは、グレーアウト状態で表示されます。[承認]をクリックするとスパムとして認識されたコメントが通常のコメントとして表示されます。

パネルを開閉する

このサンプルは、jQueryのslideUp(), slideDown(), slideToggle()などのAPIを利用してgmailの受信トレイのようなインタフェースを実装しています。サンプルのヘッダーをクリックするとメッセージの本文が開いて表示されます。再度ヘッダーをクリックするとメッセージ本文が閉じます。[すべて閉じる]をクリックすると、すべてのメッセージが閉じます。[すべて表示]をクリックすると受信メールの全件(9件)を表示します。[5件のみ表示]をクリックすると、最新のメッセージを5件表示します。

ブロック単位でクリックできるようにする

このサンプルは、jQueryのfind(), attr()APIを利用してブロック単位でクリックできるようにしています。li要素にanchorとテキストが宣言されていますが、li要素の任意の場所をクリックするとanchorのhref属性に設定されているURLに移動します。

アコーディオン2

このサンプルは、jQueryのslideToggle(), slideUp()APIを利用してdiv要素に宣言されているテキストを展開したり折りたたみします。サンプルが表示されると２番目のヘッダーが自動的に展開されます。ヘッダーをクリックするとテキストが展開されます。再度ヘッダーをクリックすると折りたたみます。

アコーディオン1

このサンプルは、jQueryのslideToggle(), slideUp()などのAPIを利用してアコーディオンを実装しています。サンプルが表示されたらヘッダーをクリックしてください。クリックしたヘッダーの詳細が展開されます。再度ヘッダーをクリックすると詳細を折りたたみます。

コンテンツを消す

このサンプルは、jQueryのanimate()APIを利用してdiv要素に宣言されているコンテンツを消します。サンプルの[X]ボタンをクリックすると、そのコンテンツがアニメーション付きで消えます。

ボタンのツールチップを表示

このサンプルは、jQueryのhover(),animate()APIを利用してボタンのツールチップを表示します。サンプルの[DHTML],[Ajax],[jQuery]ボタンにマウスを移動すると黄色のツールチップが表示されます。マウスをボタンの外に移動するとツールチップが消えます。

パネルをスライドさせる

このサンプルは、jQueryのslideToggle(), toggleClass()APIを利用してパネルをスライドさせます。サンプルの[Slide Panel]ボタンをクリックするとパネルがスライドしてテキストが表示されます。再度ボタンをクリックするとパネルが閉じます。

animate()

このサンプルは、jQueryのanimate()APIを利用してdiv要素内に宣言されているテキストにアニメーションを適用します。サンプルの[Run]ボタンをクリックすると、テキストにアニメーションが適用されて背景色が変わります。

animate()

このサンプルは、jQueryのanimate(), slideUp(), slideDown()APIを利用してボックスを移動します。サンプルの[Run]ボタンをクリックすると右、下、左、上の順に移動して元の位置に戻ります。

fadeToコマンド

このサンプルは、jQueryのfadeTo()APIを利用して表の複数行をフェイドさせます。サンプルの[Fade Multiple Rows]ボタンをクリックすると行１、行３、行５にフェイドが適用されます。

animate(params,options)

このサンプルは、jQueryのanimate()APIを利用してdiv要素を拡大します。サンプルの[Animate1]ボタンをクリックするとdiv1要素が拡大されます。[Animate2]ボタンをクリックするとdiv2要素が拡大されます。[Reset]ボタンをクリックするともとのサイズに戻ります。Animate1ボタンは、animate()APIの引数にqueue:falseを指定して3種類のアニメーション(幅、フォントサイズ、ボーダー幅を変える)を同時に実行させます。Animate2ボタンは、3種類のアニメーションを順番に実行させます。

animate(params,duration,easing,callback)

このサンプルは、jQueryのanimate()APIを利用してdiv要素を拡大/縮小します。サンプルの[Expand]ボタンをクリックするとdiv要素に表示されている「Hello!」メッセージが拡大します。[Shrink]ボタンをクリックするともとの状態になります。

click(fn)

このサンプルは、jQueryのclick(fn)APIを利用してdiv要素をクリックしたときに要素を消しています。サンプルの正方形をクリックするとclick時のイベントハンドラで正方形を消します。正方形にマウスを移動すると背景色が「赤」に変わります。

change(fn)

このサンプルは、jQueryのchange(fn)APIを利用してリストボックスから選択したアイテム情報を表示します。サンプルのリストボックスからアイテムを選択すると選択したアイテム名とvalue値が表示されます。

toggle(f1,f2,f3,...)

このサンプルは、jQueryのtoggle()APIを利用してul/li要素に宣言されているテキストの前景色を書き換えます。サンプルのテキストをクリックするとRed,Green,Blueの順に前景色が変わります。

hover(over,out)

このサンプルは、jQueryのhover()APIを利用してUI/LI要素で宣言されている項目に矢印を表示します。サンプルの項目にマウスを移動すると「赤」で矢印が表示されます。マウスを項目から移動すると矢印が消えます。

unbind(type,data)

このサンプルは、jQueryのunbind()APIを利用してbuttonに登録されているclickイベントを解除します。サンプルの[Bind Click]ボタンをクリックすると黄色で表示されているボタンにclick時のイベントを登録します。[UnBind Click]ボタンをクリックすると黄色のボタンに登録されているclick時のイベントを解除します。黄色のボタンの標題に[Bind Click!]が表示されているときは、このボタンをクリックするとイベントが発生して「Click!」が表示されます。黄色のボタンの標題に「UnBind Click!」が表示されているときは、このボタンをクリックしてイベントが発生しません。

triggerHandler(type,data)

このサンプルは、jQueryのtiggerHandler()APIを利用して各種イベントに登録されている処理を実行します。ブラウザのイベント処理は実行しないで、イベントハンドラに記述されているコードのみ実行します。サンプルの[trigger]ボタンをクリックすると、ブラウザのfocusが実行されてテキストボックスにカーソルを移動します。そして、イベントハンドラに記述されているコードを実行します。[triggerHander]ボタンをクリックしたときは、ブラウザのfocusを実行しないでイベントハンドラに記述されたコードのみ実行します。

trigger(type,data)

このサンプルは、jQueryのtrigger()APIを利用してボタンのクリック時のイベントを発生させます。サンプルの[Button #1]をクリックするとButton #1のクリック時のイベントが発生してカウントが更新されます。[Button #2]をクリックするとButton #2のクリック時のイベントが発生してカウントが更新されます。なお、[Button #2]をクリックしたとき、Button #1のクリック時のイベントも発生させます。したがって、Button #1のカウントも同時に更新されます。

bind(type,data,fn)

このサンプルは、jQueryのbind()を利用してdiv要素にclick、dblclick、mouseenter、mouseleaveイベントを登録します。サンプルのグリーンの正方形をクリックするとクリックしたときのカーソル位置を表示します。ダブルクリックするとhtmlの要素名を表示します。マウスを正方形に移動すると背景色をレッドに切り替えます。マウスを外に移動するともとのグリーンに変わります。

one(type,data,fn)

このサンプルは、jQueryのone()イベントハンドラを利用して１回だけクリック時のイベントと発生させます。サンプルのグリーンの四角形をクリックするとクリック時のイベントハンドラが発生してスタイルシートを書き換えます。同じ四角形を再度クリックしてもイベントは発生しません。

ready(fn)

このサンプルは、jQueryのready()イベントハンドラを使用してWebページがロードされたときメッセージを表示しています。ready()ハンドラは、windowのonload()ハンドラに相当します。jQueryのコードを記述するときは、ready()ハンドラ内に記述します。

width(val)

このサンプルは、jQueryのwidth()メソッドを利用してdiv要素の幅を設定しています。サンプルの長方形をクリックすると長方形の幅を60pxに書き換えます。

width()

このサンプルは、jQueryのwidth()メソッドを利用してdiv要素の幅を取得して表示します。サンプルの長方形をクリックするとdiv要素の幅が表示されます。

height(val)

このサンプルは、jQueryのheight()メソッドを利用してdiv要素の高さを設定しています。サンプルの長方形をクリックすると長方形の高さを80pxに書き換えます。

height()

このサンプルは、jQueryのheight()メソッドを利用してdiv要素の高さを取得して表示します。サンプルの長方形をクリックするとdiv要素の高さが表示されます。

css(name, value)

このサンプルは、jQueryのcss()メソッドを利用して正方形の前景色を書き換えます。サンプルの正方形にマウスを移動すると前景色が「黒」から「赤」に変わります。

css(properties)

このサンプルは、jQueryのCSS()メソッドを利用してdiv要素の背景色と前景色を書き換えます。サンプルの正方形上にマウスを移動すると正方形の背景色と前景色が変わります。マウスを正方形の外に移動するともとのカラーに戻ります。

UFrameでflickrの写真を表示

このサンプルは、UFrameを利用してDIV要素内にFlickrの写真を横に３列に表示しています。UFrameはIFrameのようにsrc属性にWebページのURLを設定して任意のWebページをロードすることができます。UFrameは、DIV要素内に直接ロードされるためスタイルシートなども共有することができます。UFrameは、jQueryを利用して実装しています。 UFrameに必要なJavaScriptの外部ファイルは、 http://www.codeplex.com/UFrame からダウンロードすることができます。

JavaScript + Ajax 新着サンプル トップ50

検索結果の件数を設定

検索結果をタブに表示

ウェブを検索する

jQuery.trim(str)

jQuery.browser.version

jQuery.browser

unload(fn)

submit(fn)

mouseover(fn)

mouseout(fn)

mousemove(fn)

右側にメニューを表示

mouseup(fn)

mousedown(fn)

blur(fn)

focus(fn)

dblclick(fn)

左側にメニューを表示(CSS版)

イメージを置換する

左側にメニューを表示

WordPressのコメント管理機能を実装する

パネルを開閉する

ブロック単位でクリックできるようにする

アコーディオン2

アコーディオン1

コンテンツを消す

ボタンのツールチップを表示

パネルをスライドさせる

animate()

animate()

fadeToコマンド

animate(params,options)

animate(params,duration,easing,callback)

click(fn)

change(fn)

toggle(f1,f2,f3,...)

hover(over,out)

unbind(type,data)

triggerHandler(type,data)

trigger(type,data)

bind(type,data,fn)

one(type,data,fn)

ready(fn)

width(val)

width()

height(val)

height()

css(name, value)

css(properties)

UFrameでflickrの写真を表示

JavaScript + Ajax 新着サンプルトップ50