【knob】円形のUIコンポーネントを簡単に実装する方法

こんにちは、ハル@haru_elpisです。

jQueryで円形のUIコンポーネントを簡単に実装する備忘録です。

jQuery・knobの使い方

ダウンロード

jQuery Knob

Nice, downward compatible, touchable, jQuery dial.

aterrien.github.io

ダウンロードした「jquery.knob.js」ファイルをjsフォルダなど任意の場所へ移動しておきましょう。

head

<script src="js/jquery.knob.js"></script>

HTML

<input type="text" class="dial">

jQuery

$(function(){
  $(".dial").knob({
      'min':0,      //最小値
      'mac':200     //最大値
  });
});