美しい表現のjQuery用プラグインが22例まとめられた記事。美しいって点がポイントのようです。画像やHTMLをページ内オーバーレイ表示するLightbox亜種、ボックススライド、mp3プレイヤー（Flashじゃない！）、フォーム装飾や補助、アコーディオン、CSSスイッチ、タブを使った無遷移表現、メニュー装飾、カラーピッカー、レーティング、MacOSのDock風の表現、イメージ編集ツールなどが紹介されています。JSを使って凝った表現をしたい場合に参考になりそうな記事。
jQueryを使った、ボックス要素をスライドさせるJavascript。これ系のjQueryプラグインは色々ありますが、動きが滑らか、ページの順送りと指定送りが同時にできる、画像だけでなくHTMLを内包したボックスをスライドできるという点でなかなかナイス。ダウンロードして自由に使う事ができるようです。サイト内に動きを持たせたい時にイイですね。
フォームに関するjQueryプラグイン。Javascriptを使った様々なフォーム表現や、機能拡張について書かれた記事。その一部を紹介すると、ページ遷移なしの投稿完了ページの表示、ユーザーの入力補助、フィールドハイライト、ToolTip表示、Ajaxを使ったオートコンプリート、スライドを使ったかっちょいいログインパネル、ワードプレスでプラグインを使わないコンタクトフォームなどがあります。フォームに関するものだけあって、見た目よりも実用性が重視されてます。ユーザーに便利だと思ってもらえる気配りって大事ですな。
iPhone純正のインターフェースであるトグルスイッチを、通常のウェブ上でjQueryを使って再現したもの。iPhoneと同様に指でスライドさせても、またクリックするだけでもトグルが左右に切り替わります。ソースコードのダウンロードはページ下部より行えます。ソースを見ると、どうもフォームのチェックボックスタグをJSを使って上書きしているみたい。ウェブ上でiPhoneを模したインターフェースを作りたい時にイイですね。
Javascriptを使って表現する、アニメーションするタブやアコーディオンインターフェースをまとめた記事。アニメーションするというだけあって、その多くはjQueryやmootoolsなどのJSライブラリを使用しています。この記事自体はちょっと古いんだけど、紹介されている内容がアツかったので紹介。タブとアコーディオンインターフェースはそれぞれ分けて紹介されてます。CSS 3になると:targetを使う事で、こうした表現もラクチンになりますな。
イメージギャラリーとスライダーに関するjQuery用プラグインがまとめられた記事。どちらも画像をDIVボックス内でスライドさせる点においては共通したテクニックですが、一言にスライド表現とは言っても、結構いろんな表現手法があるもんですね。これだけ数が揃ってるので、サイト内で行いたいトランジションに合ったものが見つかりそうです。
ブログのコメント欄や検索欄など、入力フォームにフォーカスしたタイミングで、ラベルがフェードアウトするJS。jQueryのプラグインだそうです。試しにフォームに入力しようとすると、“Name”などの初期入力文字がフェードして薄いグレーになります。入力を始めると完全に消え、入力した文字を消してフォーカスアウトするとまた復活します。フォーム横に“Name”とか書いておくよりもこっちの方がスマートですね。装飾面だけでなく機能的でもあるナイスなJS。
規模の大きいサイトでよく見るドロップダウンメニュー。メインメニューの下にサブメニューがぶら下がるタイプのサイトでは、ナビゲーションとして有効な手段です。この記事ではいろんなサイトのドロップダウンメニューを紹介して、中にはリンク先でソース配布しているものもあります。それぞれCSSのみ、jQueryを使ったもの、mootoolsを使ったものをはじめ、Prototypeなどその他のJSライブラリを使ったものなども紹介されてます。一言にドロップダウンメニューとは言っても、その動きやデザインによって使用感は随分変わるので、サイトに合った手法を探す時にナイスな記事。
Drop-Down Menu: 30+ Useful Scripts To Enhance Header Navigation
