Clock Timepicker Plugin for jQuery

JavaScript

アナログ時計感覚で使えるタイムピッカー「Clock Timepicker Plugin for jQuery」

Clock Timepicker Plugin for jQueryは、アナログ時計感覚で使えるタイムピッカーを実装することができるjQueryプラグインです。Androidのタイムピッカーからインスパイアされています。直感的に時や分を決められるので、なかなか使いやすいですね。スマホとの相性もいいと思います。

Clock Timepicker Plugin for jQuery

デモ

デモページにはいくつかのサンプルが設置されています。例えば、上にあるスタンダードタイプのタイムピッカーをクリックしてみると、アナログ時計のようなものが表示されます。

外側には1〜12の数字が、内側には00と13〜23の数字が円形に並べられています。外側と内側を使い分けることで、午前・午後を明確にすることができますね。

時を選択したあとは、分を選択する画面が表示されます。こちらもアナログ時計のように5分単位で数字が並べられていますが、数値の指定は1分単位で行うことが可能です。

ほかにも、いくつかのサンプルが用意されているので気になる人はそちらもチェックしてみてください。

オプションもたくさん用意されていて、カラーやデュレーションなどいろんな項目のカスタマイズができるようになっています。

afternoonHoursInOuterCircle、autosize、colors.buttonTextColor、colors.clockFaceColor、colors.clockInnerCircleTextColor、duration、durationNegative、fonts.buttonFontSize、fonts.fontFamily、maximum、minimum、onChange、onClose、onOpen……など、ほかにもさまざまなオプション項目があります。

というわけで、アナログ時計のような感覚で使えるカスタマイズ性に優れたタイムピッカーを実装できるjQueryプラグイン「Clock Timepicker Plugin for jQuery」の紹介でした。

Clock Timepicker Plugin for jQuery

関連記事

  1. JQuery-SnakeGallery

    JavaScript

    ホバーした方向へエフェクトが追従してくる「JQuery-SnakeGallery」

    JQuery-SnakeGalleryは、ホバーした方向へエフェクトが…

  2. jQuery RS Carousel

    JavaScript

    レスポンシブ対応のシンプルなカルーセルを実装できる「jQuery RS Carousel」

    レスポンシブ対応のシンプルなカルーセルを実装できるjQueryプラグイ…

  3. jQuery Brazzers Carousel Plugin
  4. jQuery cardslider

    JavaScript

    カードをスライドさせるようにコンテンツを表示できる「jQuery cardslider」

    jQuery cardsliderは、コンテンツをカードのように表示し…

  5. flatpickr

    JavaScript

    超軽量で使い方もカンタンな日付ピッカー「flatpickr」

    flatpickrはjQueryなどのライブラリに依存することなく動作…

  6. ZooMove

    JavaScript

    マウスオーバーで画像を拡大ズーム・移動もできるjQueryプラグイン「ZooMove」

    ZooMoveは、マウスオーバーで指定された画像やエリアをズームするこ…

最近の記事

  1. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ
  2. カメラマングローブ Grip Hot Shot III
  3. 包(つつむ)巾着ポーチ
  4. KMC-80BK

Instagram始めました

Facebookページ

PAGE TOP