jQueryを使って、画像をインタラクティブに紹介するJavascript。Live Demoのページから、実際に動作しているデモを見ることができます。Flickrやってる人なら分かると思うんだけど、ようするに画像の特定のポイントにキャプションを付ける事ができ、さらにポイントクリックによりポップアップインフォメーションを追加できるというものです。この手の見せ方って、例えばFlashで製品紹介をする場合などによく見られるけど、JSという選択肢もアリですね。ってか最近ってだいたいの事がJSでできるようになりましたね。
サイト制作をする上で、たまに必要となってくる別ページの読み込み。これにはいくつか方法があって、一番手っ取り早いのがiframeによる読み込み。けどこれって縦幅の調整に困る上にあまりスタイリッシュじゃない（Javascriptを使って高さを自動調整する事もできますが）。そんなわけでページ内にインクルードしたいと思った時に使える2つの手法を紹介します。というか最近仕事で必要だったので、せっかく作ったんだからその備忘録みたいな感じ。
MooToolsを使ったクールなスライドショー。ブラインドが開くようなトランジションを使って写真を紹介できます。デモページはこちら。写真の下に、スライドショーの表示時間の残りをプログレスバーで見る事ができる点が機能的にナイス。またCSS3のtext-shadowが細かく使用されていて、デザイン的にもとってもクール。スタイリッシュに写真を見せたい時に使えそうなJavascriptです。
フォームの機能面、デザイン面を拡張するjQueryプラグインのまとめ記事。パスワードの安全性チェック、ドロップダウンのチェックリスト、オートコンプリート、ボックスハイライト、フォームパーツのデザイン置換、Lightboxのようなオーバーレイ表示、フォーム入力補助、インプット内容のマスクツール、アップローダーなどが紹介されてます。ログインフォームのあるサイトや、お問い合わせなどにおけるちょっとした機能追加をしたい場合に使えそうです。
テキストの量に応じて幅が変わる、シンプルな角丸ボタンをCSSだけで動作させるというもの。このあたりを見ると、JSファイルが使われていない事が分かります。HTML記述がいわゆるspanタグの2重がけするものでわりと簡単であるという点、 Inactive, Active, Hoverという3つの状態を制作できる点において優れているなぁという印象。汎用性は高そうです。早速使わせてもらいます。
CSSで角丸ボックスを作る方法がいくつもまとめられた記事。最近じゃCSS3を使う方法をよく見かけるけど、それだとIEユーザーの画面では描画されないので、角を丸くする事がマストのデザインであればCSS2で作成する必要があります。またJSを併用して描画する方法もあるので、サイトの趣旨やターゲットに沿った角丸ボックスの描画法が見つかると思います。まぁ画像でやっちゃうのが慣れれば早いという話でもありますが。
ECサイトや大企業のサイトなどでたまに見る、ボタンにオンマウスする事で表れるデッカいドロップダウンメニューを、jQueryを使ったフェード効果を併用して表現してます。デモページはこちらから。ドロップダウンで出てくる項目が多いためそれらを横並びさせる点が、少ない場合との相違点。また似たようなナビゲーションを持つサイトもいくつか紹介されてます。メガサイト制作時に提案できそうなナビゲーションですね。
Appleの製品紹介でよく使われる、Javascriptを使ったスライド表現っぽいものが紹介されてます。使われるライブラリはjQuery。デモページはこちらから見る事ができます。ソースダウンロードもでき、解説もされているので、わりとサクっと導入できそうです。企業サイトでは1ページ内で多くの製品を見せる事ができますし、またポートフォリオサイトでも使いやすそうな印象。
