Clever Geek Handbook

jQueryUI timePicker-時間を選択するためのウィジェット

画像 企業プロジェクトで作業する過程で、ユーザーインターフェイスを開発するタスクに頻繁に切り替える必要があります。 もちろん、フロントエンドの実装では、自転車を発明するのではなく、既製のコンポーネントを使用します。 あらゆる場合に既にプラグインが存在するように見えますが、最近、日付ピッカー用のカレンダー要素の実装が膨大な数になっているのに驚きましたが、時間ピッカーはどういうわけか動き回ります。



見た目が悪かったのか（plugins.jqueri.comには似たようなものが1つしかありません-KitKatClockですが、それはいくぶん「未完成」です）、検索したくないか、実際には誰もそのような要素を気にしません。 一般的に、私が開発していたインターフェースの一部は、指でフィールドを埋めることに焦点を当てていたため（デバイスのターゲットオーディエンスは情報キオスクです）、またはめったにマウスではなく、時間を入力するためのフィールドがたくさんあったので、私は誰も必要としない別のjqueryプラグインを作成することにしました 。



だから。 TKの声明。

  1. 要素が解決すべき主なタスクは、キーボードなしでのフィールドへの時間の入力の高速化です。 理想的には、2回のクリックで。 タイミングアルゴリズムは直感的でなければなりません。
  2. タッチスクリーンの最初の焦点。 この要素は、画面上の不要なポップアップキーボードデバイスを防ぐ必要があります。 可能であれば、入力フィールドを閉じたり、画面を超えないように、画面上に正しく配置されます。
  3. デスクトップマシンでは、ユーザーが入力の主要な手段として使用する場合、ユーザーがキーボードからフィールドに入力するのを妨げないでください。 ヘルプは、たとえば、分離する「：」文字の自動置換で構成されます。 つまり 人が数字だけを入力すれば十分です。
  4. 古いブラウザとの互換性を確保します。 はい、はい-IE6がなければ、どこにもありません。 ターゲット情報キオスクは、あなたが知っている人のライブラリと正確にそのバージョンに基づいた特殊なソフトウェアを使用します。
  5. jQueryUIカレンダーとの互換性を確保します。 私たちの要素は、お気に入りのカレンダーが既に添付されているフィールドで正しく機能し、それを補完し、干渉しないようにする必要があります。
  6. 接続と使用は簡単なはずです。




要素の接続はほとんど簡単です。 



<link rel="stylesheet" href="clock-ui.css" type="text/css"/> <script language="javascript" src="clock-ui.min.js"></script>


確かに、1つがあります。 アイテムは画像を使用しています。 また、これらの画像はまったく異なる場所に配置される場合があります。 画像はスタイルで綴られています。 つまり、サイトでそのような要素を使用して、写真を希望する場所に配置し、スタイルに適切な変更を加える必要があります。



非表示のテキスト
dataURIの使用を考えていました。 しかし、第一に、cssファイルは膨大になり（これは良くありません）、第二に、IEはそれを好みません。 誰かがこの問題をエレガントに解決する方法を教えてくれたら、感謝します。


非表示のテキスト
私はSVGの使用を考えていました。 私も4時間（！）Xara Xtremeで時計を描きました。 しかし、残念ながら、Xaraは、ネイティブ形式からSVGにファイルをエクスポートしようとすると、エラーでクラッシュするか、空のファイルを保存します。 過ごした時間でごめんなさい。 輸出できる親切な人がいれば喜んでいるでしょう。 純粋なSVGで要素のバージョンを収集してください。

これがファイルです。





要素の有効化はさらに簡単です： 



 $('input.time').timePicker();


ここでは、時間クラスを持つすべてのテキストフィールドを要素に関連付けます。 そして、繰り返しの呼び出しは許容されます。



カレンダーが最初に初期化されている場合、カレンダーに関連するフィールドに対して呼び出すことができます。 timePickerがそのような結合フィールドに時刻値を挿入できるようにするには、datePickerがdateFormatオプション（および/またはaltFormat）で少なくとも1つのスペースで区切られた 'T'文字を設定する必要があります。 



 $('.date') .datepicker({dateFormat: 'dd.mm.yy T'}) .timePicker();


カレンダーにaltFieldとaltFormatがあり、 'T'も含まれている場合、時間はカレンダーに設定されます。



timePicker要素は、オプションを使用した初期化をサポートしています。 多くのオプションはありませんが、あります。





フィールドで選択した時間の値を取得するには、2つの方法があります。



最初：フィールドの値を直接読み取ります。 私たちのプロジェクトでは、そのようなフィールドは文字列として送られ、サーバー側で分析されるため、このソリューションは私たちにぴったりです。



2番目：次のように、「生の」形式で時間を読み取ることができます。 



 var hours = $('#element').data().hours, minutes = $('#element').data().minutes, pm = $('#element').data().pm_time;


最後に、Unix形式で時刻を取得する必要がある場合（1日の開始からの秒数）、次を使用します。 



 $('#element').date().time;


非表示のテキスト
カレンダーに関連する要素については、日付と時刻をよりエレガントにしたい 
 $('#element').datepicker('getDate')
しかし、残念ながら、getDate / setDateを介してdatePicker要素の日付に影響を与えることはできませんでした。 カレンダーは、非表示の場合、フィールドで以前に選択された日付ではなく、現在の日付を永続的に返しました。





要素の操作をテストしたいものは歓迎です。



いつものように 、プロジェクトはgithubにあります。


More articles:


All Articles