時間の選択に関して

時間の選択に関して

時計のアイコンを用意して、そのアイコンにカーソルの焦点があった際に、プルダウンで
１５分単位の時間が表示され、そこで選択された時間を別のテキストボックスに表示させる
ような記述をしたいと考えています。

単純にプルダウンの表示／非表示でコントロールする事や、プルダウンで選択された時間を
テキストボックスに表示するという事は可能ですが、メニューのプルダウンのようにクリックせずに
カーソルをアイコンに載せた瞬間にプルダウンが展開され、その中で選択をし、テキストに表示
させるような事がしたいと考えています。

何か良いサンプル的なものがあれば教えて下さい。

そもそもjavascriptではそのような事はできないのでしょうか？？？

教えて下さい。

よろしくお願いします。

No.2 ベストアンサー 回答者： yyr446 回答日時： 2010/10/05 13:20

「時間の選択」＝＞timepickerといいます。

単純にしたいならおつくりになったセレクトボックスを予め{display:none;}
にしておいて、時計のイメージ画像をマウスオーバーのトグル動作で、
{display:block;}に相互に切り替わるようにして、セレクトボックスのselected
のイベントで、テキストに表示、再び{display:none;}に戻す。でよいと思います。

手っ取り早くかっこいいのが欲しかったら、
「javascript timepicker」で検索すればクールなインターフェースの
ライブラリーがたくさん見つかります。

例えば、
http://www.nogray.com/time_picker.php
↑なんか、アナログ時計がポップアップして、針をドラッグして時間を選択
出来ます。（残念ながら現在配布中止みたい）

http://labs.perifer.se/timedatepicker/
↑シンプルですね

http://home.jongsma.org/software/js/datepicker
↑なんかよさげですね。目的にあってませんか

http://trentrichardson.com/examples/timepicker/
私なら、jQueryUIベースの↑を選びます。
イベントの発火方法は、jQueryで簡単に変更できるはずです。

この回答への補足

いつもいつもありがとうございます。

参考にさせて頂きます。

補足日時：2010/10/05 14:57

No.1 回答者： yambejp 回答日時： 2010/10/05 11:20

疑似的なプルダウンを作るのが妥当かと。

divかなにかでブロック要素をつかえばロジック自体はさほど難しくはないかと。
onmouseoverしたらdisplayやheightで調整するとか

ただきれいにみせたいなら何らかのライブラリを使うことになると思います

この回答への補足

早速のご回答ありがとうございます。

知識がなく申し訳ありません。

もう少しサンプル的なものがあれば助かります。。。

よろしくお願いします。

補足日時：2010/10/05 11:34