Holo风格圆盘进度条knob使用教程

jQuery Knob是一款可以实现圆盘风格进度条的小插件，使用很方便，api也比较全面。先上个效果图：

这个是奶牛自己写的一个小效果图，下面说说knob。knob的实现的效果是HTML5的canvas。兼容性上Chrome, Safari, Firefox, IE 9.0都可以，还蛮不错的。更多效果可以看http://anthonyterrien.com/knob/。

下面说说使用：

1.下载knob可以去https://github.com/aterrien/jQuery-Knob，也可以直接

git clone git://github.com/aterrien/jQuery-Knob.git 

2.嵌入html中js代码

<script src="js/jquery.knob.js"></script> 

3.使用，knob是通过对<input>进行处理来实现canvas绘图的。先在页面中插入一个input

<input class="knob" type="text" value="30" data-width="150" 
data-fgColor="#009100" data-skin="tron" data-thickness=".1" 
data-angleOffset="0">  

我这个里面已经加了一些参数，等下解释。

4.通过js脚本来对knob进行初始化

$('.knob').knob(); 

这是最简单的操作，当然，根据官方的文档，初始化里面是可以提供参数的。也就是说上面input里面的data-的参数都可以通过初始化来完成。如格式：

$(".knob").knob({ 
                'width':150 
                ,'fgColor':"#009100" 
                ,'thickness':".1" 
                ,'angleOffset':"0" 
                }); 

这样子，其实input里面只要标识出class或者id以及value供使用就可以了。

5.关于演示页面中的skin的使用，奶牛看了下代码，是通过如下方式实现的。

$('.knob').knob({draw : function () { 
 
                    // "tron" case 
                    if(this.$.data('skin') == 'tron') { 
 
                        var a = this.angle(this.cv)  // Angle 
                            , sa = this.startAngle          // Previous start angle 
                            , sat = this.startAngle         // Start angle 
                            , ea                            // Previous end angle 
                            , eat = sat + a                 // End angle 
                            , r = true; 
 
                        thisthis.g.lineWidth = this.lineWidth; 
 
                        this.o.cursor 
                            && (sat = eat - 0.3) 
                            && (eateat = eat + 0.3); 
 
                        if (this.o.displayPrevious) { 
                            ea = this.startAngle + this.angle(this.value); 
                            this.o.cursor 
                                && (sa = ea - 0.3) 
                                && (eaea = ea + 0.3); 
                            this.g.beginPath(); 
                            thisthis.g.strokeStyle = this.previousColor; 
                            this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false); 
                            this.g.stroke(); 
                        } 
 
                        this.g.beginPath(); 
                        this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ; 
                        this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false); 
                        this.g.stroke(); 
 
                        this.g.lineWidth = 2; 
                        this.g.beginPath(); 
                        thisthis.g.strokeStyle = this.o.fgColor; 
                        this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false); 
                        this.g.stroke(); 
 
                        return false; 
                    } 
                } 
            }); 

这样子一个可行的绘图就出来了，下面说说怎么修改值：

$('.change').change(function(){ 
                $('.knob').val($('.change').val()).trigger('change'); 
            }) 

比如我们还有一个input的class为change，那么只要change以改变，就直接反馈到canvas绘图上了。更详细的api可以参考https://github.com/aterrien/jQuery-Knob。