ダイヤルで回して値を調整できるプラグイン「jQuery Knob」
2021.07.20 Posted by Coding_team
こんにちは、ウェブラボクリエイターズメモです。
今回は、ダイヤルで回して値を調整できるプラグイン「jQuery Knob」を紹介したいと思います。
早速ですが、このプラグインで何ができるか見てもらうためにいくつかDEMOを用意しましたのでそちらをご確認ください。
→DEMO
このような綺麗なダイヤルの入力欄が作れます！
公式の解説など見れば説明は不要かもしれませんが、簡単にしていきます。
■HTML
|
1 2 3 |
<input type="text" value="75" class="dial" data-fgColor="#ff0000"><!-- data-fgColorで色変更 --> <input type="text" value="35" class="dial" data-fgColor="#00ff00" data-angleArc="270"><!-- data-angleArcで角度 --> <input type="text" value="75" class="dial" data-fgColor="#0000ff" data-readOnly="true"><!-- data-readOnlyで値の変更不可 --> |
後々script部分で指定するためクラスdialを付与し、オプションなどはdata属性で追加で記述します。
■HTML script部分
|
1 2 3 4 5 6 7 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="js/jquery.knob.js"></script> <script> $(function() { $(".dial").knob(); }); </script> |
script部分はinput要素に対応したクラスを指定するだけです。
たったこれだけ、CSSなども不要です！もちろんスマホにも対応しています！！
公式に沢山のオプションやDEMOもあるのでそちらも合わせてご参考ください。
対応ブラウザは公式にIE8～と書いてあるので特に気にする必要も無さそうです。
フォームなどにももちろん使えますが、読み取り専用にすれば円グラフ表現などもできそうなので幅広い用途に使えそうですね。
是非試してみてはどうでしょう。
以上、クリエイターズメモでした。
関連記事こちらの記事も合わせてどうぞ。
