my blog my blog

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

 

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

jquery knob

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

下面说说使用:

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

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

2.嵌入html中js代码

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

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

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

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

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

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

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

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

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

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

  1. $('.knob').knob({draw : function () { 
  2.  
  3.                     // "tron" case 
  4.                     if(this.$.data('skin') == 'tron') { 
  5.  
  6.                         var a = this.angle(this.cv)  // Angle 
  7.                             , sa = this.startAngle          // Previous start angle 
  8.                             , sat = this.startAngle         // Start angle 
  9.                             , ea                            // Previous end angle 
  10.                             , eat = sat + a                 // End angle 
  11.                             , r = true
  12.  
  13.                         thisthis.g.lineWidth = this.lineWidth; 
  14.  
  15.                         this.o.cursor 
  16.                             && (sat = eat - 0.3) 
  17.                             && (eateat = eat + 0.3); 
  18.  
  19.                         if (this.o.displayPrevious) { 
  20.                             ea = this.startAngle + this.angle(this.value); 
  21.                             this.o.cursor 
  22.                                 && (sa = ea - 0.3) 
  23.                                 && (eaea = ea + 0.3); 
  24.                             this.g.beginPath(); 
  25.                             thisthis.g.strokeStyle = this.previousColor; 
  26.                             this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false); 
  27.                             this.g.stroke(); 
  28.                         } 
  29.  
  30.                         this.g.beginPath(); 
  31.                         this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ; 
  32.                         this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false); 
  33.                         this.g.stroke(); 
  34.  
  35.                         this.g.lineWidth = 2
  36.                         this.g.beginPath(); 
  37.                         thisthis.g.strokeStyle = this.o.fgColor; 
  38.                         this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false); 
  39.                         this.g.stroke(); 
  40.  
  41.                         return false; 
  42.                     } 
  43.                 } 
  44.             }); 

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

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

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