ノブ型のUIを実現するjQueryプラグイン「jQuery Knob」
fukasawaです。こんにちは。先週の土曜、スカイツリーに遊びに行ったのですが、浅草で乗り換える際サンバカーニバルに巻き込まれました。歩道は人で埋め尽くされ、信号一つ渡るだけで15分もかかってしまいました。まさかあんなに混雑しているとは…サンバ恐るべし。
さて、今回はjQuery Knobについてです。jQuery Knobを使用することで円形のダイアルをぐりんぐりん回して数値設定を行うUIコンポーネントを実現できます。
以前から少し気になっていたのですが、個人的に触ってみたかったのでここで書いてみようかと。
簡単な使い方
1. jQueryとjquery.knob.jsを読み込みます。
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.knob.js"></script>
2. HTMLにテキストボックスを配置して
<input type="text" class="dial">
$(function() {
$(".dial").knob({
'min': 0, //最小値
'max':200 //最大値
});
});
これで、下記サンプルのようなコンポーネントを生成できます。
カスタマイズ
設定を変えることで、数値を非表示にしたり、色を変えたり、スキンを変更したり、読み取り専用にしたりといろいろカスタマイズすることが可能です。公式サイトにデモが用意されているのでご参照ください。
動的に動かしてみる
下記のように.val()で値を設定した後、.trigger('change')を実行すると、値に合わせてUIの表示も変更されます。
$('.dial')
.val(27)
.trigger('change');
下記サンプルのような感じで、動的に値を変更してアニメーションさせても楽しいかもしれません。
