jQuery

jQueryのAPIを利用してフルページのイメージギャラリーを実装する

このサンプルは、jQueryのAPIとCSSを利用してフルページに対応したイメージギャラリーを実装します。サンプルが表示されたら左下に表示されている任意のサムネイルをクリックします。するとサムネイルがフルページで拡大表示されます。マウスを移動するとイメージがスクロールします。拡大表示されたイメージを切り替えるには左右に表示されている矢印ボタンをクリックします。サムネイルを表示するには、画面最下位に表示されている「VIEW THUMBS」をクリックします。

jQueryのNivoSliderプラグインでiPad風のスライドショーを実装する

このサンプルは、jQueryの NivoSlider プラグインを利用してiPad風のスライドショーを実装します。サンプルが表示されるとイメージが自動的に切り替わります。手動でイメージを切り替えるには、最下位に表示されている「○」をクリックするか、画面中央の左右に表示されている「左右」の矢印をクリックします。

jQueryのShakyMenuプラグインでメニューを振動させる

このサンプルは、jQueryの ShakyMenu プラグインを利用してメニューを左右に振動させます。サンプルが表示されたらマウスを任意のメニューに移動してください。カレントのメニュー以外が左右に振動します。しばらくすると振動が停止します。

jQueryのCLEditorプラグインでHTMLエディタを実装する

このサンプルは、jQueryの CLEditor プラグインでWYSIWYG HTMLエディタを実装します。サンプルが表示されたら、テキストを入力して[B],[I],[U]...などのボタンをクリックして編集してみてください。

jQueryのSmooth Div Scrollプラグインでイメージをスクロールする

このサンプルは、jQueryの Smooth Div Scroll プラグインを利用してイメージを左右にスライドさせます。サンプルが表示されるとイメージが自動的に左側にスクロールします。イメージが終端までスクロールしたら逆方向にスクロールさせます。手動でスクロールするときは左右の矢印にマウスを移動します。マウスの位置によりスクロールするスピードを調整できます。

jQueryのMopSliderプラグインでイメージをアップルのサイト風にスライドさせる

このサンプルは、jQueryの MopSlider プラグインを利用して Appleのサイト風にイメージをスライドさせます。サンプルが表示されたら「Any Words」のハンドルをドラッグして左右に移動してみてください。イメージが左右にスライドします。スライダー右端の切り替えボタンをクリックすると「Any Words」が「Auto」に切り替わって自動的にスライドします。

jQueryのInsetBorderプラグインでイメージのボーダーをアニメーション化する

このサンプルは、jQueryの InsetBorder プラグインを利用してイメージのボーダーをアニメーション化します。ここでは、イメージに５種類のボーダーを表示しています。イメージにマウスを移動するとボーダーがアニメーション化します。

jQueryのYouTubeEmbedプラグインでカスタムビデオプレイヤーを表示する

このサンプルは、jQueryの YouTubeEmbed プラグインを利用してカスタムビデオプレイヤーを表示します。サンプルが表示されたら[Click to Play]ボタンをクリックしてビデオを再生します。停止させるには動画にマウスを移動して[Click to Pause]ボタンをクリックします。それにしても、この熊賢いですね！

jQueryでサムネイルナビゲーションギャラリーを実装する

このサンプルは、jQueryとCSSを利用してサムネイルナビゲーションギャラリーを実装しています。サンプルが表示されたら「Newest Collection」の右端に表示されてい[V]をクリックします。サムネイルの一覧が表示されたら任意のサムネイルをクリックして拡大してみてください。サムネイルにマウスを移動して左右に移動するとサムネイルがスライドします。サムネイルを閉じるには[^]をクリックします。

jQueryのBubbleEngineプラグインで泡を発生させる

このサンプルは、jQueryの BubbleEngine/BubbleMachine プラグインを利用して泡を発生させます。泡はバブルマシンが発生させます。サンプルが表示されると２台のバブルマシンから泡がでます。 [Add a new Bubble Machine]ボタンをクリックすると、バブルマシンを追加します。泡の種類は「Type」から選択することができます。１番目のタイプを選択するとハート型の泡がでます。３番目のタイプを選択するとツイッター型の泡がでます。２番目のタイプを選択すると、通常の泡ができます。泡の大きさはスライダーで変えることができます。バブルマシンとコントールパネルは、ドラッグして任意の場所に移動することができます。

jQueryのjYouTubeプラグインでビデオのサムネイルを取得する

このサンプルは、jQueryの jYouTube プラグインを利用してYouTubeのビデオのサムネイルを生成して表示します。サンプルが表示されたら、テキストボックスにビデオのURLを入力して[Get Thumbnail]ボタンをクリックします。テキストボックスのURLを書き換えて試してみてください。

jQueryのdragsortプラグインで要素を並べ替える

このサンプルは、jQueryの DragSort プラグインで要素をドラッグしながら並べ替えることができます。サンプルが表示されたら、「Simple 1D list」のアイテムをドラッグして並べ替えてみてください。「2D list with drag and drop between lists」では、２つのリストボックス間でアイテムを移動することができます。さらに、移動したアイテムはリスト内で並べ替えることができます。

jQueryのloopedSliderプラグインでイメージをスライドさせる

このサンプルは、jQueryの loopedSlider プラグインでイメージを自動的にスライドさせます。サンプルが起動すると、2.5秒後にイメージが自動的にスライドします。イメージの下にカレントの位置が●で表示されます。手動でイメージを切り替えるときは、左右の矢印ボタンをクリックします。

jQueryのJQnoticeプラグインでメッセージを表示する

このサンプルは、jQueryの JQnotice プラグインを利用してウェブページにメッセージを表示します。サンプルが起動したら「Click me」をクリックしてみてください。すると、ウェブページの最上位にメッセージが表示されます。メッセージは、JQnotice()プラグインの引数に指定します。メッセージは2秒後に自動的に消えます。メッセージを消すとき、animate()apiでアニメーション化しています。

jQueryでTwitterのつぶやきを無制限にスクロールして表示する

このサンプルは、jQueryでTwitterのapiを利用して特定のユーザー(私の）つぶやきを表示します。スクロールバーをドラッグしてつぶやきをドラッグするとTwitterのapiを実行して次のつぶやきを表示します。この処理を繰り返して無制限につぶやきを表示します。「このサンプルを編集して試してみる」をクリックしたら、usernameの変数にご自分のTwitterのユーザー名を設定して実行してみてください。

jQueryのCatch404プラグインでリンク先が見つからないときポップアップにユーザーフレンドリーなメッセージを表示する

このサンプルは、jQueryの Catch404 プラグインを利用してリンク先が存在するかチェックします。そして、リンク先が見つからないときは、ポップアップウィンドウにユーザーフレンドリーなメッセージを表示します。サンプルが起動すると３個のボックスが表示されます。左端のボックスは内部リンクが見つからない、真ん中のボックスは外部リンクが見つからない、右側のボックスは正常な外部リンクになっています。それぞれのボックスのリンクをクリックしてみてください。リンク先が見つからないときは、ポップアップにメッセージが表示されます。

複数のjQueryライブラリを同時に使用するには

このサンプルは、複数のjQueryライブラリを同時にロードして個別のライブラリを利用します。ここで紹介しているテクニックは、jQueryのプラグインがjQueryのバージョンに依存するときに利用すると便利です。jQuery 1.4.2をデフォルトのライブラリとするときは、 var jQuery142 = $.noConflict(true); が不要です。

jQueryのCalculartorプラグインでテキストボックスに電卓を組み込む

このサンプルは、jQueryの Calculator プラグインを利用してテキストボックスに電卓を組み込みます。サンプルが表示されたらテキストボックスにフォーカスを移動してください。テキストボックスの右端に表示されている電卓のアイコンをクリックして表示することもできます。電卓がドロップダウン表示されますので、計算したら[USE]ボタンをクリックします。 IEのときは「このサンプルを編集して試してみる」をクリックして検証してください。

jQueryのCaretプラグインでMS Word風のミニバーを表示する

このサンプルは、jQueryのCaretプラグインを利用してMS Word風のミニバーを表示します。サンプルが表示されたらテキストエリアの単語をドラッグして選択してください。マウスをリリースすると右上のミニバーが表示されますので「b i u Link」から選択します。たとばえ、[b](bold)を選択すると、Previewに選択した単語が太字で表示されます。

jQueryのAnimated Table Sortプラグインで表をアニメーション化して並べ替える

このサンプルは、jQueryの Animated Table Sort プラグインを利用して表(table)の列をアニメーション化して並べ替えます。サンプルが表示されたら表の見出し（Place, County, Phone code, Population)をクリックしてください。クリックした見出しの列をアニメーション付きで並べ替えします。

jQueryのLike it? Tweet it!　プラグインを利用して訪問者がその場でつぶやきができるようにする

このサンプルは、jQueryの Like it? Tweet it! プラグインを利用してサイト訪問者がその場でつぶやきができるようにしています。サンプルが表示されたら「Tweet this」のリンクをクリックします。すると画面右下に「Like it? Tweet it!」のダイアログが表示されます。 Twitterに接続されていないときは[Connect with Twitter]ボタンをクリックして接続します。ログイン画面が表示されたらあなたのTwitterの「ユーザー名／メールアドレス」と「パスワード」を入力して[Connect]ボタンをクリックします。 Twitterに接続されるとダイアログに文章が入力できるようになります。ダイアログには、このページのリンクが生成された状態になっていますのでリンクの入力は不要です。本文のみ入力してください。ダイアログ右下の[Tweet!]ボタンをクリックすると登録します。試しに、ご自分のTwitterのアカウントでログインしてつぶやいてみてください。念のため、このページへのリンクは自動的に生成されていますので本文のみ入力してください。 ※IEの場合、「このサンプルを編集して試してみる」をクリックして検証してください。

jQuery UIのDialogプラグインを利用して外部サイトのコンテンツを表示する

このサンプルは、jQuery UIのDialogプラグインを利用してダイアログに外部サイトのコンテンツを表示します。サンプルが表示されたら「Goolge」「jQuery」「jQuery UI」のリンクをクリックしてください。ダイアログが開いてウェブサイトのコンテンツが表示されます。ダイアログはリサイズすることができます。

jQueryのFlipプラグインを利用して最新のつぶやきを表示する

このサンプルは、jQueryの Flip プラグインを利用してTwitterの最新のつぶやきを表示します。サンプルが表示されたらテキストボックスのTwitterのUser Nameを入力して[Submit]ボタンをクリックします。Twitterのアカウントがない方は[Submit]ボタンをクリックしてください。するとボックスがフリップして最新のつぶやきが表示されます。[Return]をクリックすると元のボックスに戻ります。

jQueryのライブラリをGoogle CDNからロードするときリスクをゼロにする

このサンプルは、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のImagineMenuプラグインでイメージを使用したメニューを実装する

このサンプルは、jQueryの ImagineMenu プラグインを利用してイメージを使用したメニューを実装しています。イメージはCSS Spriteを使用して表示します。

jQueryのMultiSelectプラグインでドロップダウンリストから複数のアイテムを選択する

このサンプルは、jQueryの MultiSelect プラグインを利用してドロップダウンリストから複数のアイテムを選択することができます。サンプルが表示されたらドロップダウンリストのヘッダーをクリックします。するとアイテムがドロップダウンに表示されますのでマウスでクリックして選択します。「Check all」「Uncheck all」をクリックするとすべてのアイテムを選択／非選択します。下のドロップダウンは、アイテムをグループ単位で表示します。グループ名をクリックすると、グループ内のすべてのアイテムを選択／非選択できます。

jQueryでボタンをアニメーション化してコンバージョンを上げる！

このサンプルは、jQueryの Animate Shadow プラグインを利用してボックスをアニメーション化します。サンプルが表示されたらボタンにマウスを移動してみてください。３番目のボタンをクリックするとバウンスします。 ※このサンプルは、IE以外でご覧ください。IE9 Previewでは、正常に動作するはずです。

jQueryのTextTranslateプラグインを使用してワンクリックで任意の言語に翻訳する

このサンプルは、jQueryの TextTranslate プラグインを利用して任意の言語の文章を日本語などに翻訳することができます。サンプルが表示されたらパラグラフの先頭に表示されている「Translate this]のアイコンをクリックします。ポップアップが表示されたら、ドロップダウンリストから翻訳したい言語を選択します。たとえば、日本語に翻訳するときは「Japanese」を選択します。パラグラフ１と２は英語、パラグラフ３はデンマーク語で記述されています。

jQueryでグリッド型のサムネイルを表示するスライドショー

このサンプルは、jQueryのanimte apiとcssを利用してスライドショーを実装しています。サンプルが表示されるとイメージが自動的にスライドします。マウスをイメージ上に移動すると右下にナビゲーションバーが表示されますので、手動でイメージを切り替えるたり、自動切り替えを一時停止することができます。ナビゲーションの左端のグリッドボタンをクリックするとイメージの上位にグリッド型のサムネイルを表示します。サムネイルをクリックすると拡大表示します。サムネイルは左右の矢印ボタンをクリックしてスライドさせることができます。[▲]をクリックするとグリッド型サムネイルを閉じます。

jQueryで花火をうちあげる

このサンプルは、jQueryのanimate apiを利用して夜空に花火をうちあげます。サンプルが表示されると夜空に３秒間隔で花火が打ち上げられます。打ち上げる間隔は、setIntervalの時間を書き換えます。花火の大きさは「emitter.duplicate(50)」の引数50を書き換えます。

jQueryのfacyboxプラグインでイメージを拡大する

このサンプルは、jQueryの facybox プラグインを利用してサムネイルをズームインします。サンプルが表示されたら3番目のボックスに表示されているサムネイルをクリックしてください。ウィンドウが表示されてサムネイルがズームインされます。２番目のボックスの[Open gallery]をクリックすると、イメージを順番にウィンドウに表示します。イメージがズームインされた状態でマウスを移動すると左右の矢印ボタンが表示されますので、このボタンをクリックしてイメージを切り替えます。１番目のボックスから[View...]をクリックするとイメージを表示します。 ※このプラグインは Fancybox とは異なります。スペルミスではありません、facyboxです。

jQueryで写真をランダムに並べ替える

このサンプルは、jQueryとCSS3を利用して写真をランダムに並べ替えします。サンプルが起動すると写真をランダムに並べ替えた状態で表示します。写真はドラッグして移動したり、クリックして前面／背面に入れ替えできます。 [View All]をクリックするとすべての写真を重ねて表示します。写真を切り替えるには、写真中央にマウスを移動して切り替えボタンをクリックします。 [Shuffle]をクリックするとランダムに並べ替えします。写真右上の[X]をクリックするとディスク上から削除します。

※このサンプルはIE以外でご覧ください。

jQueryでイメージの角に丸みを付ける

このサンプルは、jQueryとCSS3を利用してイメージの角に丸みを付けます。上段の例はCSS3のもで実装しています。下段の例はjQueryで実装しています。このサンプルは、Firefox, Chrome, Safariでご覧ください。

jQueryでMac風のアイコンドックを表示する

このサンプルは、CSSとjQueryを利用してMac風のアイコンドックを表示します。マウスをアイコンに移動するとアイコンがドックから飛び出します。そして、アイコンからマウスを遠ざけるとアイコンがドックに戻ります。ここでは、CSS版とjQuery版を用意しました。 jQueryでアイコンを拡大するときanimate()を使用しています。

jQueryのCycleプラグインでイメージを上下にスライドさせる

このサンプルは、jQueryの Cycle プラグインを利用してイメージを上下にスライドさせます。サンプルが表示されるとイメージが7秒間隔で自動的にスライドします。手動でスライドさせるときは、右端の上下の矢印ボタンをクリックします。

jQueryとCSSでスタック型のスライドショーを実装する

このサンプルは、jQueryとCSSを利用してスタック型のスライドショーを表示します。サンプルが表示されたら、任意のサムネイルをクリックしてください。サムネイルをスライドさせるには左右の矢印ボタンをクリックします。サムネイルがリフレクション付きで表示されます。するとサムネイルがズームインされます。このときズームインされた写真が重なった状態で表示されます。ズームインされた写真をクリックすると切り替わります。ズームインを閉じるには右上の[X]ボタンをクリックします。このサンプルは、Chrome/Safariでご覧ください。

※左右の矢印ボタンが見づらいので「このサンプルを編集して試してみる」をクリックしてご覧ください。

jQueryとCSSでスライドショーを実装する

このサンプルは、CSSを利用してスライドショーを作成します。サンプルが表示されたら任意のサムネイルをクリックしてください。イメージが拡大表示されたら左右の矢印ボタンをクリックして切り替えます。このサンプルは、ChromeとSafari用に最適化されています。 IE以外はCSSのみでスライドショーを実装しています。 IEの場合、jQueryのshow/hideを利用してイメージを切り替えています。

このサンプルは「このサンプルを編集して試してみる」をクリックしてご覧ください。

jQueryのIE Select Width プラグインでドロップダウンをコンボボックス風にする

このサンプルは、 IE Select Width プラグインを利用してドロップダウンリストの幅を書き換えてコンボボックス風にします。「Example one」では、プラグインで幅をドロップダウンの幅を200pxに設定しています。「Example two」では、CSSでプラグインの幅を設定しています。 ※このサンプルは、IE6/IE7/IE8でご覧ください。

jQuery UIのAutoCompleteプラグインで半透明なドロップダウンメニューを表示する

このサンプルは、jQuery UIのAutoCompleteプラグインでドロップダウンメニューを表示するときアイテムを半透明にします。サンプルが表示されたら、テキストボックスに「ca」を入力してみてください。候補リストが半透明で表示されます。候補リストが表示されたら「↓」キーを押してアイテムを選択して[Enter]で確定します。 ※このサンプルは、iframeを使用していますので[Enter]が正常に動作しません。検証するときは、「このサンプルを編集して試してみる」から確認してください。

jQuery UIのDialogプラグインでWebページをダイナミックにロードする

このサンプルは、jQuery UI 1.8.2のDialogプラグインを利用してダイアログにYouTubeの動画を表示しています。サンプルが表示されたらリンク「Load Page...」をクリックしてください。 Dialogプラグインのopenイベントでは、load()メソッドを実行して「video.htm」をダイナミックにロードしています。 video.htmでは、YouTubeの動画を表示しています。ちなみに、この動画では無料のGIMPで3Dの電子ブックカバーを作成します。私の１作目の電子ブックです。詳細は、「動画でeBookカバーを作ろう！」を参照してください。

jQueryのPiroBox 1.2.2プラグインでサムネイルをズームインする

このサンプルは、jQueryの Pirobox 1.2.2 でサムネイルをズームインします。サンプルが表示されたら任意のサムネイルをクリックしてみてください。サムネイルがズームインされます。ズームインされたとき、左上の[再生]ボタンをクリックするとイメージが自動的に切り替わります。手動で切り替えるには画面中央に表示されている左右の矢印ボタンをクリックします。ズームを閉じるには右上の[X]ボタンをクリックします。ズームインの枠は半透明で表示されます。

jQueryのImage DropDownプラグインを利用してドロップダウンにアイコンを表示する

このサンプルは、jQueryの Image DropDown プラグインを利用してドロップダウンリストにアイコンを表示します。サンプルが表示されたらドロップダウンリストをクリックしてアイテムを展開してください。アイテムの左側にアイコンが表示されます。アイテムの左側に表示するアイコンは、option要素のtitle属性に設定します。

jQueryのIdleCheckerプラグインでWebページがアイドル状態のとき警告する

このサンプルは、jQueryの IdleChecker プラグインを利用して Webページが10秒間アイドル状態のとき警告メッセージを表示します。そして5秒間待ってログアウトページに移動します。

jQueryでマルチカラーのタブ型のメニューを作る

このサンプルは、jQueryのcss/show/hide apiを利用してマルチカラーのタブ型メニューを作成しています。マウスをトップメニューに移動するとサブメニューが表示されます。トップメニューをクリックするとサブメニューが固定されます。

jQueryでimgタグをanchorタグで囲ってリンク付きに変える

このサンプルは、jQueryのwrap()apiを利用して img要素をanchor要素で囲ってリンク付きにします。サンプルが表示されたら[Change to Hyperlink]ボタンをクリックしてください。イメージがリンク付きになります。

jQueryで世論調査の結果を3Dの棒グラフで表示する

このサンプルは、jQueryのanimate()apiを利用して3Dの棒グラフを表示します。棒グラフの高さはanimate()の引数「height: '68%'」で設定します。

jQueryのtagCloudプラグインでタグをアニメーション化する

このサンプルは、jQueryの tagCloud プラグインを利用してタグをアニメーション化します。タグにマウスを移動するとアニメーションを一時的にポーズします。タグをクリックすると対応する記事に移動します。

jQueryのjQuery.Syntaxプラグインを利用してJavaScriptのコードを表示する

このサンプルは、 jQuery.Syntax プラグインを利用して PHP, JavaScript, C#, Visual Basicのソースコードを表示しています。 PHPのコードはインラインで表示しています。「View Raw Code」をクリックするとフォーマットなしのコードを表示します。「?」をクリックするとjQuery.Syntaxのサイトに移動します。

jQueryのFlickr Photobar Galleryプラグインでフッターにフリッカーの写真を表示する

このサンプルは、jQueryの Flickr Photobar Gallery プラグインを利用してフリッカーの写真をギャラリー形式で表示します。サンプルが表示されたら下のフッターにスクロールします。 [FLICKR PHOTOSTREAM]ボタンが表示されたらクリックします。するとフリッカーの写真を検索して表示します。左右の矢印ボタンをクリックするとサムネイルがスライドします。サムネイルをクリックすると拡大表示します。

jQueryでテキストボックスのコピー／ペーストを禁止する

このサンプルは、jQueryのcopy/pasteイベントを利用してテキストボックスの値をコピペするのを禁止します。サンプルが表示されたら「Email」の値をコピーしてみてください。「Comfirm Email」の右側に警告メッセージがフェイドイン／フィイドアウトされます。このサンプルは、IE以外に最適化されています。