jQueryを使って、画像をインタラクティブに紹介するJavascript。Live Demoのページから、実際に動作しているデモを見ることができます。Flickrやってる人なら分かると思うんだけど、ようするに画像の特定のポイントにキャプションを付ける事ができ、さらにポイントクリックによりポップアップインフォメーションを追加できるというものです。この手の見せ方って、例えばFlashで製品紹介をする場合などによく見られるけど、JSという選択肢もアリですね。ってか最近ってだいたいの事がJSでできるようになりましたね。
サイト制作をする上で、たまに必要となってくる別ページの読み込み。これにはいくつか方法があって、一番手っ取り早いのがiframeによる読み込み。けどこれって縦幅の調整に困る上にあまりスタイリッシュじゃない（Javascriptを使って高さを自動調整する事もできますが）。そんなわけでページ内にインクルードしたいと思った時に使える2つの手法を紹介します。というか最近仕事で必要だったので、せっかく作ったんだからその備忘録みたいな感じ。
フォームの機能面、デザイン面を拡張するjQueryプラグインのまとめ記事。パスワードの安全性チェック、ドロップダウンのチェックリスト、オートコンプリート、ボックスハイライト、フォームパーツのデザイン置換、Lightboxのようなオーバーレイ表示、フォーム入力補助、インプット内容のマスクツール、アップローダーなどが紹介されてます。ログインフォームのあるサイトや、お問い合わせなどにおけるちょっとした機能追加をしたい場合に使えそうです。
ECサイトや大企業のサイトなどでたまに見る、ボタンにオンマウスする事で表れるデッカいドロップダウンメニューを、jQueryを使ったフェード効果を併用して表現してます。デモページはこちらから。ドロップダウンで出てくる項目が多いためそれらを横並びさせる点が、少ない場合との相違点。また似たようなナビゲーションを持つサイトもいくつか紹介されてます。メガサイト制作時に提案できそうなナビゲーションですね。
Appleの製品紹介でよく使われる、Javascriptを使ったスライド表現っぽいものが紹介されてます。使われるライブラリはjQuery。デモページはこちらから見る事ができます。ソースダウンロードもでき、解説もされているので、わりとサクっと導入できそうです。企業サイトでは1ページ内で多くの製品を見せる事ができますし、またポートフォリオサイトでも使いやすそうな印象。
使えるjQueryプラグインと、そのテクニックについて書かれた記事。jQueryとは言っても使い道は様々なので、テーブルに関するもの、フォームに関するもの、イメージに関するもの、ナビゲーション関連といった感じにジャンル分けされて紹介されてます。フォーム関連ツールあたりなかなか実用的なものが揃っている印象。
jQueryを使って作る、シンプルなスライダー。フィールドの中には1コンテンツ、それをボタン操作によってスライドさせるというだけのシンプルなものです。作りがシンプルだけに応用ができそうなプラグインなので、スライド表現を制作する上での出発点としてイイ感じ、のような気がします。Demonstrationからデモを、DownlodからソースをDLできます。
28 Oct 2009 – 3 Comments
Create a Simple Infinite Carousel with jQuery
jQueryを使ったフェードするタブ。View Demoよりデモページを見る事ができます。タブをクリックしたタイミングでフェードしながら表示されます。もちろんページ遷移なし。ページ内のちょっとしたコンテンツの切り替えにいいですね。ビデオでの導入例表示もあります。
