2015年2月23日月曜日

jQueryカレンダー

2015.02.23
超簡単!カレンダーから日付入力する方法:jQuery ui Datepicker
あなたのサイトの入力フォームは、日付入力が難しくなっていませんか?
希望発送日時や納品日など日付に関する入力は意外と手間がかかるので、
入力しやすいよう改善しましょう!
フォームのユーザビリティ(使い勝手)は入力完了率やコンバージョン率に大きく影響からです。
ではどうすれば日付入力が簡単になるのでしょうか?
答えは「カレンダー」を使用して日付入力をしてもらうのです。
普段から見慣れているカレンダーを使用することで、直感的に日付を確認することができ、
また1クリックするだけで選択出来ます。
今回は「jQuery ui Datepicker」を使用して、カレンダーを簡単に実装する方法をご紹介します!

Web Design Fan
http://www.webdesign-fan.com/jquery-ui-datepicker

jQuery
http://jquery.com/




そもそも「jQuery ui Datepicker」とは?
jQuery ui Datepickerとは「jQuery UI」の中にある1つの機能です。
「jQuery UI」とは、jQueryをベースに構築されたユーザーインターフェースに関する機能をまとめたライブラリのことで、
その1つ1つの機能は「アクション」「ウィジェット」「エフェクト」などのカテゴリに分類されます。
「jQuery UI」の導入はとても簡単で、ライブラリにリンクするコードを記述するだけです。
導入することでドラッグ&ドロップなど複雑なユーザーインターフェースを簡単に導入することが出来ます。
そして「jQuery ui Datepicker」は「ウィジェット」カテゴリーにあるカレンダー機能のことで、
手間のかかる日付入力を直感的にすることができます。
導入方法
jQuery ui Datepickerはデザイン性と機能性に優れていますが、その導入方法はとても簡単です!以下が導入に関する主なステップです。
jQueryを導入する
jQuery UIを導入する
カレンダーのテーマを決める
実装用コードを記述する

Web Design Fan
http://www.webdesign-fan.com/jquery-ui-datepicker

jQuery
http://jquery.com/




Yahoo! UI
YUI is a free, open source JavaScript and CSS library for building richly interactive web applications.

YUI Library
http://yuilibrary.com/




0 件のコメント:

コメントを投稿