插件--旋钮插件jQuery knob
插件描述：如果你也在寻找一款生成漂亮旋钮(knob)的jQuery插件的话，那么今天我们介绍的jQuery knob肯定是一个不错的选择。
如果你也在寻找一款生成漂亮旋钮(knob)的jQuery插件的话，那么今天我们介绍的jQuery knob肯定是一个不错的选择。它使用canvas帮助我们生成超酷的旋钮特效，你可以使用插件选项或者HTML5的data属性来自定义设置插件属性，方便简捷并且优雅，我相信大家肯定会喜欢这个超酷的jQuery插件，如果你有任何问题活着建议请给我们留言！
主要特性
支持只读模式
两个供选择的callback方法：change和release
支持自定义选项并且支持使用HTML5的data属性来配置插件选项
内建不同的主题
对于老的浏览器拥有不错的fallback机制
如何使用
导入jQuery和knob插件类库：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script src="js/jquery.knob-1.0.1.js"></script>
设定参数和callback方法：
$(".knob").knob({
max: 940,
min: 500,
thickness: .3,
fgColor: '#2B99E6',
bgColor: '#303030',
'release':function(e){
$('#img').animate({width:e});
}
});
当然，你也可以使用HTML5的标签属性来设置参数，如下：
<input class="knob2" data-width="150" data-fgColor="green" data-bgColor="#303030" data-skin="tron" data-thickness=".3" data-min="200" data-max="600" value="200">
HTML代码
<div id="knobwrapper"> <input class="knob" data-width="300" data-skin="tron" data-displayInput="true" value="200"> <div> <input class="knob2" data-width="150" data-fgColor="green" data-bgColor="#303030" data-skin="tron" data-thickness=".3" data-min="200" data-max="600" value="200"> </div> </div>
Javascript代码
$(function() {
$(".knob").knob({
max: 940,
min: 500,
thickness: .3,
fgColor: '#2B99E6',
bgColor: '#303030',
'release':function(e){
$('#img').animate({width:e});
}
});
$(".knob2").knob({
'release':function(e){
$('#img').animate({width:e});
}
});
});
详解：
可如例子中在input中进行设置，加前缀data-
input中未进行的设置，可以在js里进行一一设置，类如最大、最小值，与value相对于，若value小于最小值，则旋转图标中心的文字以最小值为准。
thickness为圆圈的宽度
fgColor：前景色
bgColor：背景色
release：目前还不知主要的作用