時間の選択に関して

質問

時間の選択に関して

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

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

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

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

教えて下さい。

よろしくお願いします。

回答No.2

yyr446 · ベストアンサー

「時間の選択」＝＞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で簡単に変更できるはずです。

補足

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

参考にさせて頂きます。

回答No.1

yambejp

疑似的なプルダウンを作るのが妥当かと。
divかなにかでブロック要素をつかえばロジック自体はさほど難しくはないかと。
onmouseoverしたらdisplayやheightで調整するとか

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

補足

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

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

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

よろしくお願いします。