ダイヤルで回して値を調整できるプラグイン「jQuery Knob」

tecmemo2107

こんにちは、ウェブラボクリエイターズメモです。

 

今回は、ダイヤルで回して値を調整できるプラグイン「jQuery Knob」を紹介したいと思います。

 

早速ですが、このプラグインで何ができるか見てもらうためにいくつかDEMOを用意しましたのでそちらをご確認ください。

DEMO

 

このような綺麗なダイヤルの入力欄が作れます!

公式の解説など見れば説明は不要かもしれませんが、簡単にしていきます。

jQuery Knob

 

■HTML

 

後々script部分で指定するためクラスdialを付与し、オプションなどはdata属性で追加で記述します。

 

■HTML script部分

script部分はinput要素に対応したクラスを指定するだけです。

 

たったこれだけ、CSSなども不要です!もちろんスマホにも対応しています!!

 

公式に沢山のオプションやDEMOもあるのでそちらも合わせてご参考ください。

jQuery Knob

 

対応ブラウザは公式にIE8~と書いてあるので特に気にする必要も無さそうです。

フォームなどにももちろん使えますが、読み取り専用にすれば円グラフ表現などもできそうなので幅広い用途に使えそうですね。

是非試してみてはどうでしょう。

 

以上、クリエイターズメモでした。

ダイヤルで回して値を調整できるプラグイン「jQuery Knob」 はコメントを受け付けていません
  • このページを共有する