【メルマガ購読】 名前:

メール:

※メルマガを購読していただくと新着サンプルとサイトの更新情報などをお届けします。

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

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

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

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

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

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

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

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

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

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

12345678910...