skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」

｜ ｜ ｜ ｜ ｜ ｜ ｜

時間を指定できるタイムピッカーは、多くありますが、ここまでデザイン性に富んだものはなかったかと思います。
NoGray Time Pickerはサンプルをご覧いただければわかりますが、まさに時計型です。
これにより、直感的な操作でユーザビリティが向上可能です。

使用方法
NoGray Time Pickerの右側にある「Download It Now」からファイル一式をダウンロードします。
これらをアップロードし、以下のように記述します。
<script language="javascript" src="mootools.v1.11.js"></script>
<script language="javascript" src="nogray_time_picker_min.js"></script>
<script language="javascript">
window.addEvent("domready", function (){
var tp1 = new TimePicker('id名', 'inputID名', 'toggler');
});
</script>
上記で指定したid名を時計を表示するdivに、inputID名をテキストボックスに指定します。
<input type="text" name="inputID名" id="inputID名">
<a href="#" id="toggler">テキスト</a>
<div id="id名" class="time_picker_div"></div>
ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」サンプル

記事作成：2008年08月25日

前の記事：BOMBERMAN JAVASCRIPT GAME by mootools.js
次の記事：jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」