操作しやすいのかどうかは別として、個人的に好きなUIなのでメモ。
あ、スマホとかタッチデバイスだと操作しやすいかも。
使い方
jquery.knob.jsを読み込みます。
HTML
<script type="text/javascript" src="jquery.knob.js"></script>
サンプル
jQueryオブジェクトのknob()メソッドを実行します。
Javascript
<script>
$(function(){
$('.dial', '.jquery-knob-sample1').knob();
});
</script>
HTML
<div class="jquery-knob-sample1">
<input type="text" value="75" class="dial">
</div>
オプション
記述方法としては、inputタグの属性として設定する方法と、knobメソッドに引数として渡す方法があります。
またオプションの値はconfigure型のイベントをトリガすることで随時変更することが可能です。
HTML
HTMLでdata-オプション名 として記述するっぽいです。
<input type="text" class="dial" data-min="-50" data-max="200" data-sttoper="100" data-readOnly="false" />
javascript
$('.dial').knob({
min: -50,
max: 50
});
Behaviors
サンプル
Javascript
// とりあえずページ読み込み時に初回の実行
var dial2 = $('.dial', '.jquery-knob-sample2').knob();
// 設定フォーム
var settings = $('#knob-configure1');
/**
* 設定変更した場合の処理。
* 入力内容を集めてトリガ
*/
settings.on('submit', function(e){
// submitの動作をキャンセル
e.preventDefault();
// 変数宣言
var data = settings.serializeArray(),
i = 0,
length = data.length,
options = {},
cast,
value;
// オプションオブジェクトの作成
// 型が違うと挙動がおかしくなるのでキャストする
for (i; length > i; i++) {
cast = settings.find('[name=' + data[i]['name'] + ']').data('cast');
switch (cast) {
case 'int':
value = parseInt(data[i]['value']);
break;
case 'boolean':
value = data[i]['value'] === 'true';
break;
}
options[data[i]['name']] = value;
}
// オプションの再設定
dial2.trigger('configure', options);
});
HTML
<div class="jquery-knob-sample2">
<input type="text" class="dial" />
</div>
UI
サンプル
Javascript
// とりあえずページ読み込み時に初回の実行
var dial3 = $('.dial', '.jquery-knob-sample3').knob();
// 設定フォーム
var settings2 = $('#knob-configure2');
/**
* 設定変更した場合の処理。
* 入力内容を集めてトリガ
*/
settings2.on('submit', function(e){
// submitの動作をキャンセル
e.preventDefault();
// 変数宣言
var data = settings2.serializeArray(),
i = 0,
length = data.length,
options = {},
cast,
value;
// オプションオブジェクトの作成
// 型が違うと挙動がおかしくなるのでキャストする
for (i; length > i; i++) {
cast = settings2.find('[name=' + data[i]['name'] + ']').data('cast');
switch (cast) {
case 'int':
value = parseInt(data[i]['value']);
break;
case 'float':
value = parseFloat(data[i]['value']);
break;
case 'boolean':
value = data[i]['value'] === 'true';
break;
default:
value = data[i]['value'];
break;
}
options[data[i]['name']] = value;
}
console.log(options);
// オプションの再設定
dial3.trigger('configure', options);
});
HTML
<div class="jquery-knob-sample3">
<input type="text" class="dial" />
</div>
Hooks
特定のイベントに対してコールバック関数を設定することができます。
コールバック関数内でのthisはKnobインスタンスとのこと。
release |
マウスで操作を終了すると発生。
引数として現在の値が入る。
|
change |
値を変更すると発生。
引数として現在の値が入る。
|
draw |
canvas描画時に発生。
Context :
this.g : canvas context 2D (see Canvas documentation)
this.$ : jQuery wrapped element
this.o : options
this.i : input
|
cancel |
triggered on [esc] keydown |
サンプル
Javascript
var screen = $('.output', '.jquery-knob-sample4');
var dial4 = $('.dial', '.jquery-knob-sample4').knob({
release: function(v){
screen.text('release:' + v);
},
change: function(v){
screen.text('change:' + v);
},
draw: function(){
console.log(this);
},
cancel: function(){
screen.text('cancel!');
},
});
HTML
<div class="jquery-knob-sample4">
<input type="text" class="dial" />
<div class="output"></div>
</div>