|
|
クールサンプル
行数:
|
◆ 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
プラグインを利用して泡を発生させます。
泡はバブルマシンが発生させます。
サンプルが表示されると２台のバブルマシンから泡がでます。
[Add a new Bubble Machine]ボタンをクリックすると、バブルマシンを追加します。
泡の種類は「Type」から選択することができます。１番目のタイプを選択するとハート型の泡がでます。３番目のタイプを選択するとツイッター型の泡がでます。２番目のタイプを選択すると、通常の泡ができます。泡の大きさはスライダーで変えることができます。
バブルマシンとコントールパネルは、ドラッグして任意の場所に移動することができます。
|
◆ jQueryのloopedSliderプラグインでイメージをスライドさせる
(#7)
このサンプルは、jQueryの
loopedSlider
プラグインでイメージを自動的にスライドさせます。サンプルが起動すると、2.5秒後にイメージが自動的にスライドします。
イメージの下にカレントの位置が●で表示されます。手動でイメージを切り替えるときは、左右の矢印ボタンをクリックします。
|
◆ jQueryのCatch404プラグインでリンク先が見つからないときポップアップにユーザーフレンドリーなメッセージを表示する
(#8)
このサンプルは、jQueryの
Catch404
プラグインを利用してリンク先が存在するかチェックします。そして、リンク先が見つからないときは、ポップアップウィンドウにユーザーフレンドリーなメッセージを表示します。
サンプルが起動すると３個のボックスが表示されます。左端のボックスは内部リンクが見つからない、真ん中のボックスは外部リンクが見つからない、右側のボックスは正常な外部リンクになっています。それぞれのボックスのリンクをクリックしてみてください。
リンク先が見つからないときは、ポップアップにメッセージが表示されます。
|
◆ 複数のjQueryライブラリを同時に使用するには
(#9)
このサンプルは、複数のjQueryライブラリを同時にロードして個別のライブラリを利用します。ここで紹介しているテクニックは、jQueryのプラグインがjQueryのバージョンに依存するときに利用すると便利です。jQuery 1.4.2をデフォルトのライブラリとするときは、
var jQuery142 = $.noConflict(true);
が不要です。
|
◆ jQueryのCalculartorプラグインでテキストボックスに電卓を組み込む
(#10)
このサンプルは、jQueryの
Calculator
プラグインを利用して
テキストボックスに電卓を組み込みます。
サンプルが表示されたらテキストボックスにフォーカスを移動してください。
テキストボックスの右端に表示されている電卓のアイコンをクリックして表示することもできます。
電卓がドロップダウン表示されますので、計算したら[USE]ボタンをクリックします。
IEのときは「このサンプルを編集して試してみる」をクリックして検証してください。
|
|