JQ插件：Knob旋钮按钮

在线演示

用法介绍：

分享一款超棒的jQuery旋钮插件 - jQuery knob

http://anthonyterrien.com/knob/

我要实现的效果：

就是需要下方有一个缺口，用于显示一些文字。

我利用knob只显示了这个圆环，其中的文本数字都是在div中显示的，跟knob无关！

首先导入jquery和knob插件：

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.knob.js"></script>

然后定义一个div用于显示圆环：

<div class="knob" data-width="250" data-height="250" data-bgcolor="#333" data-fgColor="#6B4F00" data-angleOffset="-140" data-angleArc="280" data-displayInput="false" data-readOnly="true" ></div>

注意设置其中的data-angleOffset和data-angleArc，这样一个环就出来了，默认应该是完整的圈圈。

JS代码：

$(".knob").knob({
   		change : function (value) {
      	},
      	release : function (value) {
          	console.log("release : " + value);
      	},
      	cancel : function () {
          	console.log("cancel : ", this);
       	},
       	draw : function () {//设置了data-skin="tron"才有效

         	// "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 = 1;

               	this.g.lineWidth = this.lineWidth;

               	this.o.cursor
                 	&& (sat = eat - 0.3)
                  	&& (eat = eat + 0.3);

                  	if (this.o.displayPrevious) {
                     	ea = this.startAngle + this.angle(this.v);
                      	this.o.cursor
                         	&& (sa = ea - 0.3)
                          	&& (ea = ea + 0.3);
                      	this.g.beginPath();
                       	this.g.strokeStyle = this.pColor;
                       	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();
                   	this.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;
          	}
      	}
   	});

最后为其动态设置value：

$(".knob").val(data.loyalty.progress_percentage).trigger("change");

data.loyalty.progress_percentage是个百分比值，根据你的需要传入即可。

更多功能请参考网上其他文档。

还可以试试这个插件：

http://www.jqueryscript.net/chart-graph/Animated-Circle-Statistics-Plugin-With-jQuery-Canvas-Circliful.html

• 

• 大小: 141 KB
• jquery.knob.zip (5.5 KB)
• 下载次数: 3
• 查看图片附件