[Ajax][UI]画像スライダー・郵便番号検索・バリデーション
Posted on by vanillate
画像をインラインフレームなどを使わずにスライドさせたり、郵便番号を入力するだけで（ボタンを押さずに）住所の入力補助ができたり、データを送信するまえにエラーチェックを行ったりといったインターフェイスが、当たり前に利用されるようになってきました。
利用側としては、使いやすい方に慣れていく傾向にあるので、私も取り入れるために調べてみた際のまとめです。
こういう処理の実装を行う時って、時間がない、仕上げの時が多いので、比較的に簡単に導入できそうなものを中心に、ご紹介します。
jQueryTOOLS デモ
スライダー、ツールチップなどが簡単に実装できるライブラリ
1. Tabs（タブでDIV内容を切り替え）
2. Tooltips（ロールオーバーなどでヘルプ表示）
3. Overlay（同一ページ内で新しいウィンドウを表示）
4. Expose（クリックされた要素以外を暗転）
5. Scrollable（スライダー・要素内のスクロール）
6. Flashembed（flashの補助機能）
7. Combinations
8. jQuery Tools and Flowplayer
これらウェブ上で動く８つの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