時間を指定してくれるjQueryプラグイン「timedropper」の紹介【オプションも解説】

2019年10月11日2021年4月16日

1 公式サイト
2 準備
3 cssとjsを読み込もう
4 htmlを書いていこう
5 javascriptと書いていこう
6 ソースコード全文
7 timedropperのオプション

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

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

公式サイト

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

公式サイトへ

準備

公式サイトからフォルダをダウンロードしてきましょう。(2021年3月現在　会員登録しないとファイルをダウンロードできないようです。)

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

cssとjsを読み込もう

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="timedropper.js"></script>
    <link rel="stylesheet" type="text/css" href="timedropper.css">

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

htmlを書いていこう

    <input type="text" id="alarm">

1	<input type="text" id="alarm">

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

javascriptと書いていこう

   <script>
        $("#alarm").timeDropper({

            
        });
    </script>

$("#alarm").timeDropper({

});

</script>

body内

ソースコード全文

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="timedropper.js"></script>
    <link rel="stylesheet" type="text/css" href="timedropper.css">
    <title>timeDropper</title>
</head>

<body>
    <input type="text" id="alarm">

    <script>
        $("#alarm").timeDropper({


        });
    </script>
</body>

</html>

<!DOCTYPE html>

<head>

<title>timeDropper</title>

</head>

<body>

$("#alarm").timeDropper({

});

</script>

</body>

</html>

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

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”	枠線