HOME > >

jQuery Knob

操作しやすいのかどうかは別として、個人的に好きなUIなのでメモ。 あ、スマホとかタッチデバイスだと操作しやすいかも。

使い方

jquery.knob.jsを読み込みます。

HTML

  1.  
  2. <script type="text/javascript" src="jquery.knob.js"></script>
  3.  

サンプル

jQueryオブジェクトのknob()メソッドを実行します。

実行結果

Javascript

  1. <script>
  2. $(function(){
  3.     $('.dial', '.jquery-knob-sample1').knob();
  4. });
  5. </script>

HTML

  1.  
  2. <div class="jquery-knob-sample1">
  3.     <input type="text" value="75" class="dial">
  4. </div>
  5.  

オプション

記述方法としては、inputタグの属性として設定する方法と、knobメソッドに引数として渡す方法があります。 またオプションの値はconfigure型のイベントをトリガすることで随時変更することが可能です。

HTML

HTMLでdata-オプション名 として記述するっぽいです。

  1.  
  2. <input type="text" class="dial" data-min="-50" data-max="200" data-sttoper="100" data-readOnly="false" />
  3.  

javascript

引数として渡す場合、オブジェクトを渡します。

  1. $('.dial').knob({
  2.                 min: -50,
  3.                 max: 50
  4.                 });

Behaviors

key 意味 デフォルト値 設定
min 最小値 0
max 最大値 100
angleOffset スタートする場所の角度 0
angleArc この角度分の円弧が表示される。 360
stopper falseの場合、キーボードの矢印キー、マウスのホイールでの操作した場合、
最小値と最大値を超えて設定することができる。
true
readOnly trueの場合、数値のキー入力ができなくなる。 false

サンプル

上記で設定したBehaviorsを反映させる。

実行結果

Javascript

  1. // とりあえずページ読み込み時に初回の実行
  2. var dial2 = $('.dial', '.jquery-knob-sample2').knob();
  3.  
  4. // 設定フォーム
  5. var settings = $('#knob-configure1');
  6.  
  7. /**
  8.  * 設定変更した場合の処理。
  9.  * 入力内容を集めてトリガ
  10.  */
  11. settings.on('submit', function(e){
  12.     // submitの動作をキャンセル
  13.     e.preventDefault();
  14.  
  15.     // 変数宣言
  16.     var data    = settings.serializeArray(),
  17.         i       = 0,
  18.         length  = data.length,
  19.         options = {},
  20.         cast,
  21.         value;
  22.  
  23.     // オプションオブジェクトの作成
  24.     // 型が違うと挙動がおかしくなるのでキャストする
  25.  
  26.     for (i; length > i; i++) {
  27.         cast = settings.find('[name=' + data[i]['name'] + ']').data('cast');
  28.         switch (cast) {
  29.             case 'int':
  30.                 value = parseInt(data[i]['value']);
  31.                 break;
  32.  
  33.             case 'boolean':
  34.                 value = data[i]['value'] === 'true';
  35.                 break;
  36.         }
  37.         options[data[i]['name']] = value;
  38.     }
  39.  
  40.     // オプションの再設定
  41.     dial2.trigger('configure', options);
  42. });

HTML

  1.  
  2. <div class="jquery-knob-sample2">
  3.     <input type="text" class="dial" />
  4. </div>
  5.  

UI

key 意味 デフォルト値 設定
cursor display mode "cursor" gauge
thickness ゲージの太さ
width グラフの円の大きさ
displayInput falseの場合、数字の表示がされない&キー入力ができなくなる。 true
displayPrevious trueの場合、マウスでゲージを操作するときゲージの色が半透明になる false
fgColor ゲージの色
bgColor グラフのベースカラー

サンプル

上記で設定したBehaviorsを反映させる。

実行結果

Javascript

  1. // とりあえずページ読み込み時に初回の実行
  2. var dial3 = $('.dial', '.jquery-knob-sample3').knob();
  3.  
  4. // 設定フォーム
  5. var settings2 = $('#knob-configure2');
  6.  
  7. /**
  8.  * 設定変更した場合の処理。
  9.  * 入力内容を集めてトリガ
  10.  */
  11.  
  12. settings2.on('submit', function(e){
  13.     // submitの動作をキャンセル
  14.     e.preventDefault();
  15.  
  16.     // 変数宣言
  17.     var data    = settings2.serializeArray(),
  18.         i       = 0,
  19.         length  = data.length,
  20.         options = {},
  21.         cast,
  22.         value;
  23.  
  24.     // オプションオブジェクトの作成
  25.     // 型が違うと挙動がおかしくなるのでキャストする
  26.  
  27.     for (i; length > i; i++) {
  28.         cast = settings2.find('[name=' + data[i]['name'] + ']').data('cast');
  29.         switch (cast) {
  30.             case 'int':
  31.                 value = parseInt(data[i]['value']);
  32.                 break;
  33.             case 'float':
  34.                 value = parseFloat(data[i]['value']);
  35.                 break;
  36.             case 'boolean':
  37.                 value = data[i]['value'] === 'true';
  38.                 break;
  39.  
  40.             default:
  41.                 value = data[i]['value'];
  42.                 break;
  43.         }
  44.         options[data[i]['name']] = value;
  45.     }
  46.     console.log(options);
  47.     // オプションの再設定
  48.     dial3.trigger('configure', options);
  49. });

HTML

  1.  
  2. <div class="jquery-knob-sample3">
  3.     <input type="text" class="dial" />
  4. </div>
  5.  

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

  1. var screen = $('.output', '.jquery-knob-sample4');
  2.  
  3. var dial4 = $('.dial', '.jquery-knob-sample4').knob({
  4.     release: function(v){
  5.         screen.text('release:' + v);
  6.     },
  7.  
  8.     change: function(v){
  9.         screen.text('change:' + v);
  10.     },
  11.  
  12.     draw: function(){
  13.         console.log(this);
  14.     },
  15.  
  16.     cancel: function(){
  17.         screen.text('cancel!');
  18.     },
  19. });

HTML

  1.  
  2. <div class="jquery-knob-sample4">
  3.     <input type="text" class="dial" />
  4.     <div class="output"></div>
  5. </div>
  6.