時間を指定してくれるjQueryプラグイン「timedropper」の紹介

スマホに最適化されたタイマーを作りたい。

浦島です。今回は、スマホ操作に最適化されたおしゃれなUIで直感的に操作できるjQueryプラグイン「timedropper」を紹介していきます。

公式サイト

まずは公式サイトから動作を確認して見てください。

準備

公式サイトからフォルダをダウンロードしてきましょう。

次にダウンロードしたファイルを解凍しましょう
今回必要なファイルはこの二つ
「timedropper.css」「timedropper.js」

 

cssとjsを読み込もう

これらをhead内に書き込んでいきましょう

htmlを書いていこう

body内に書いていきましょう。

javascriptと書いていこう

body内

ソースコード全文

今回、書くコード数は非常に少ないです。
非常に簡単に実装できるにでぜひ試してみてください。

timedropperのオプション

オプション 初期値 説明
autoswitch false クリック移動位置
meridians false 12時間 24時間表示
format h:mm a 時間フォーマット
mousewheel false マウスホイール可否
init_animation fadeIn 初期アニメーション
setCurrentTime true 現在時刻の設定
primaryColor “#1977cc” 設定中の文字
textColor “#555555” 設定後の文字
backgroundColor “#ffffff” 背景色
borderColor “#1977cc” 枠線

以上、時間を指定してくれるjQueryプラグイン「timedropper」の紹介でした。

もしできなかった場合はコメントいただけるとありがたいです。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)