画像をインラインフレームなどを使わずにスライドさせたり、郵便番号を入力するだけで(ボタンを押さずに)住所の入力補助ができたり、データを送信するまえにエラーチェックを行ったりといったインターフェイスが、当たり前に利用されるようになってきました。
利用側としては、使いやすい方に慣れていく傾向にあるので、私も取り入れるために調べてみた際のまとめです。
こういう処理の実装を行う時って、時間がない、仕上げの時が多いので、比較的に簡単に導入できそうなものを中心に、ご紹介します。
jQueryTOOLS デモ
スライダー、ツールチップなどが簡単に実装できるライブラリ

1. Tabs(タブでDIV内容を切り替え)
2. Tooltips(ロールオーバーなどでヘルプ表示)
3. Overlay(同一ページ内で新しいウィンドウを表示)
4. Expose(クリックされた要素以外を暗転)
5. Scrollable(スライダー・要素内のスクロール)
6. Flashembed(flashの補助機能)
7. Combinations
8. jQuery Tools and Flowplayer
これらウェブ上で動く8つのUIを実装できます。
デモはこちらから確認できます。
ライブラリのダウンロードはこちらから。
ヘッダー内に下記のように定義してから、それぞれのDemoページで実装方法を確認する方法がおすすめです。
<script src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script>
(もちろんDLしてローカルファイルを参照することも可能です。)
※jquery.toolsの前に必ずjqueryが定義されていることも前提です。
AjaxZip 2.0 JSONを使った郵便番号検索ライブラリ
ajaxで郵便番号から住所を自動で入力するフォームを作成するライブラリです。(jquery/prototype.js対応)

データをダウンロード後、ヘッダー内に追加。
<script src="ajaxzip2/prototype.js"></script> <script src="ajaxzip2/ajaxzip2.js" charset="UTF-8"></script>
郵便番号のフォームを書き換えます。
<input type="text" name="zip">
↓
<input type="text" name="zip" onKeyUp="AjaxZip2.zip2addr(this,'pref','addr',null,'addr');">あとはnameの値を都道府県にあたるinputタグにはname=”pref”を。
都道府県にあたるinputタグにはname=”addr”を対応させるだけ。便利です。
Really easy field validation デモ
フォームのバリデーションスクリプト

class属性でオプションを指定して、エラーチェックの方法を選択できます。
title属性の内容をエラー文として表示することも可能です。
リアルタイムでフォームから離れたタイミングでのバリデーションも可能。(選択できます。)
javascriptライブラリを配置します。
<script src="prototype.js" type="text/javascript"></script> <script src="validation.js" type="text/javascript"></script>
バリデートしたいエレメントは下記のようにかきます。
<input class="required validate-number" id="field1" name="field1" />
サンプルでは、submitボタンの後あたりでValidationオブジェクトをnewしているようです。
<script type="text/javascript">
var valid = new Validation('フォームのID名',{immediate:true});
</script>*オプション*
{immediate:true}
(入力フィールドから Leave したタイミングで)バリデーションを実行します。
{useTitles:true}
バリデーションメッセージをtitle属性に読みに行きます。
その他、最近ブックマークしたもの:(未試用のものもあり)
Plugins/Validation – jQuery JavaScript Library
http://docs.jquery.com/Plugins/Validation
PHPでフォームの値をリアルタイムチェック「LiveValidationPHP」:phpspot開発日誌
http://phpspot.org/blog/archives/2007/09/phplivevalidati.html
JavaScript製のフォームバリデータライブラリいろいろ:phpspot開発日誌
http://phpspot.org/blog/archives/2008/01/javascript_63.html
リアルタイムフォームバリデーション jQuery.validation.js :: 5509
http://moto-mono.net/2008/08/22/realtimeformvalidation.html
JavaScriptでフォームの値をリアルタイムにバリデートするライブラリまとめ:phpspot開発日誌
http://phpspot.org/blog/archives/2007/03/javascript_43.html
*スライダー関連*
15 Best Examples of Free jQuery Content Sliders
http://visionwidget.com/inspiration/web/295-jquery-content-sliders.html
10+ jQuery photo gallery and slider plugins
http://www.queness.com/post/222/10-jquery-photo-gallery-and-slider-plugins
25 jQuery Image Gallery/Slider Tutorials and Plugins | Vandelay Design Blog
http://vandelaydesign.com/blog/web-development/jquery-image-galleries/
13 Super Useful jQuery Content Slider Scripts and Tutorials | Web Design Ledger
http://webdesignledger.com/tutorials/13-super-useful-jquery-content-slider-scripts-and-tutorials
Slides – image slideshow plugin for jQuery
http://www.studiomediatech.com/slides/
Timothy van Sas – Simple slideshow with jQuery
http://www.incg.nl/blog/2009/simple-slideshow-with-jquery/
jQueryで斜めにもスライドさせる:via jQuery faux-3D Viewport|skuare.net
http://www.skuare.net/2009/09/jqueryviajquery_faux-3d_viewpo.html
[JS]jQueryで実装するアクセシブルなスライド スクリプト | コリス
http://coliss.com/articles/build-websites/operation/javascript/346.html
Accessible News Slider: A jQuery Plugin
http://www.reindel.com/accessible_news_slider/
簡単に画像やコンテンツをスライドできるjQueryプラグイン Easy Image or Content Slider | バシャログ。
http://c-brains.jp/blog/wsg/09/01/08-154342.php
コンテンツを滑らかにスライドさせるjQueryプラグイン:phpspot開発日誌
http://phpspot.org/blog/archives/2009/01/jquery_8.html
Easy Slider jQuery Plugin Demo
http://cssglobe.com/lab/easyslider/01.html

[...] [Ajax][UI]画像スライダー・郵便番号検索・バリデーション « vanillate (tags: jquery) [...]