Github下载地址：https://github.com/aterrien/jQuery-Knob

这个旋钮非常不错，虽然发布的时间已经很久了，2012年的插件，但是目前来说也是很不错的，可以满足基本的需要。

注意：需要依赖jquery，目前版本要求jQuery v1.7

简单的使用

引入

<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/jquery.knob.js"></script>

html代码

可以看到是直接将选项放在了input里面，这样比较方便。

<input type="text" value="65" class="knob" data-fgColor="#FFB27D" data-width="85" data-height="85" readOnly="true"/>

js代码

<script>
$().ready(function(){
    $(".knob").knob();
})
</script>

选项说明

1.行为（Behaviors ）

• min : 最小值 | 默认=0

• max : 最大值 | 默认=100

• step : 步长 | 默认=1

• angleOffset : 开始的角度数 | 默认=0

• angleArc : 显示的弧度总长 | 默认=360

• stopper : 塞子，在keydown / mousewheel上以最小值和最大值停止| 默认=true

• readOnly : 是否是只读 | 默认=false，设置=true，则无法输入值

• rotation : 方向| 默认=clockwise（顺时针），anticlockwise（逆时针）

2.界面（UI）

• cursor : 显示模式“光标”，光标大小可以通过向选项传递数值来更改，传递布尔值“true”时使用默认宽度|默认值=gauge

  设置为true，则光标显示在数值的位置，如下图

  
  

• thickness : 边框的厚度，如下图设置的0.2，0.5和1的效果

  
  

• lineCap : 两头的样式| 默认=butt（直直的）, round（有点弯弯的）如下图

  

  可以明显看出第二个（round）比较圆滑好看。

• width : 宽度

• height : 高度

• displayInput : input里面的数值是否显示，默认=true（显示） | false（隐藏）

• displayPrevious : 默认=false | true（以透明度显示上一个值）

• fgColor : 前景色，如设置#FFB27D，则显示如下图

  
  

• inputColor : 输入值的颜色，如设置#ED1C24，则显示如下图

  
  

• font : 可以设置字体

• fontWeight : 可以设置字体粗细，如设置100，则很细

• bgColor : 背景颜色，如设置#60C5F1，则显示如下图

注意有两种使用方式。

（1）上面这些选项可以在js里面设置，如下面

//html
<input type="text" value="65" class="knob"/>

//js
<script>
$().ready(function(){
    $(".knob").knob({
	readOnly: true,
	fgColor: "#FFB27D",
	width: 85,
	inputColor: "#00B0F0",
    });
})
</script>

（2）也可以直接在input标签里面设置(在选项前面加上data-)

<input type="text" value="65" class="knob" data-fgColor="#FFB27D" data-width="85" data-min="10" data-readOnly="true" data-max="70" data-height="85" data-rotation="anticlockwise"/>

3.钩子（hooks）

• 'release' : 在发布时执行

    参数: value : int, 当前值

//alert当前的值，例如是50，则alert 50
<script>
$().ready(function(){
    $(".knob").knob({	
	'release' : function (v) { 	 
	 alert(v);
	}
    });
})
</script>

• 'change' : 在每次更改值时执行

参数: value : int, 当前值

//测试直接更改input的值不会触发，只有鼠标点击更改的时候会触发，
//同时取得的值会到小数点很多位
<script>
$().ready(function(){
    $(".knob").knob({	
	'release' : function (v) { 	 
	 alert(v);
	}
    });
})
</script>

• 'draw' : 绘制画布时

<script>
$().ready(function(){
    $(".knob").knob({	
	'draw' : function () { 	 
	 console.log(this);//可以看到很多
	 console.log(this.cv);//当前input的值
	}
    });
})
</script>

• 'cancel' : 按下[esc]键触发（没有测试出来效果）

  
  

<script>
$().ready(function(){
    $(".knob").knob({	
	'cancel' : function () { 	 
	  alert(")
	}
    });
})
</script>

• 'format' : 允许格式化输出（添加单位%，毫秒…）

  这个挺重要，用的也比较多。例如要显示当前分数  60分，效果如下图

<script>
$().ready(function(){
    $(".knob").knob({	
	'cancel' : function (v) { 	 
	  return v "分";
	}
    });
})
</script>