jQuery轻量级圆形进度指示器插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

radialIndicator是一款轻量级的jQuery圆形指示器插件。该圆形指示器插件支持颜色范围，动态修改值，格式化和百分比值等形式。它可以很好的和jQuery或angular js一起工作。

使用方法

在页面中添加添加jQuery(可选)和radialIndicator.js文件：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/radialindicator.js"></script>

HTML结构

圆形指示器的HTML结构使用一个<div>即可。

<div id="indicatorContainer"></div>

调用插件

现在，可以用下面的方法调用最基本的圆形指示器：

$('#indicatorContainer').radialIndicator();

参数选项

语法

$('#indicatorContainer5').radialIndicator({
    showPercentage : false // option
});
 
//or using native javascript
var progObj = radialIndicator('#indicatorContainer5' , {
    showPercentage : false // option
});

全局参数选项

radialIndicator.defaults.radius = 80;
radialIndicator.defaults.barColor = "#99CC33";

设置为true在圆形指示器中插入给定范围的颜色。

圆形指示器的最大值。

参数名称	参数类型	默认值	描述
radius	number	50	定义圆形指示器的内部的圆的半径。
barWidth	number	5	定义圆形指示器的刻度条的宽度。
barBgColor	colour code in hex	#eeeeee	定义圆形指示器的刻度条的背景颜色。
barColor	object of colour range like ({0 : '#FF0000', 50 : '#FFFF00', 100 : '#0066FF',}) or color code in hex	#99CC33	定义渊声巷指示器的刻度条颜色。如果提供一个颜色范围对象作为值，插件会将该范围的颜色插入（如果`interpolate`选项为`true`）在指定的位置。
roundCorner	boolean	false	如果设置为`true`则圆形指示器的刻度bar有圆角。
format	# format like (##,###,###) or a formatter function	##	Define # format or formatter function to format indicator number.
frameNum	number	100 for percentage and 500 for others	Number of frames in which indcator circle is divided.
frameTime	number	10	Time taken to go from one frame to another.
fontColor	hex color code	color code of progress	By default it takes the color code of progress at specific point. If defined it will take the defined color code.
fontSize	number	Calculated	默认情况下字体大小是适合于圆形指示器的内圆。定义这个参数可以覆盖它。
fontFamily	font family similiar to per css syntax	default	定义圆形指示器的数值的字体。
fontWeight	font weight similiar to css syntax	bold	定义圆形指示器的数值的字体weight。
interpolate	boolean	true
percentage	boolean	true	设置为`true`显示圆形指示器的百分比数值。
displayNumber	boolean	true	设置为`true`显示圆形指示器的刻度数值。
initValue	number	minValue or 0	圆形指示器初始化的值。
minValue	number	0	圆形指示器的最小值。
maxValue	number	100

方法

获取对象实例

//jquery
$('#indicatorContainer').radialIndicator();
var radialObj = $('#indicatorContainer').data('radialIndicator');
 
//Vanilla JS
var radialObj = radialIndicator('#indicatorContainer');

参数

下面的方法可以在初始化后获取一个参数的值或改变任何参数值。

//getter
    var interpolate = radialObj.option('interpolate');
 
//setter
    radialObj.option('interpolate',false); 
    radialObj.option('radius',60);

获取值

下面的方法可以获取或设置圆形指示器的刻度值。设置值是不会有动画效果的。

//getter
    var curProgress = radialObj.value();
 
//setter
    radialObj.value(80);

动画

下面的方法可以在为圆形指示器设置值时有动画效果。

radialObj.animate(80);

Angular JS使用方法

首先要在页面中引入angular.radialIndicator.js和radialIndicator.js文件：

<script src="radialIndicator.js"></script>
<script src="angular.radialIndicator.js"></script>

基本使用

<div ng-app="myApp" ng-controller="demo">
     <div data-radial-indicator=""></div>
     <div data-radial-indicator="{radius : 80, percentage :true,barColor : '#87CEEB', initValue: 70}"></div>
     <div data-radial-indicator="indicatorOption"></div>   
 </div>

angular.module('myApp', ['ng-sortable','radialIndicator'])
    .controller('demo', ['$scope', function ($scope) {
        $scope.indicatorOption = {
                radius : 80,
                percentage :true,
                barColor : "#87CEEB",
                initValue : 70
        };
    }]);

通过模式绑定指示器

你可以在指示器中的radial-indicator-model属性中设置模式的名字，指示器将会根据模式的改变而相应的改变：

<div ng-app="myApp" ng-controller="demo">
     <div data-radial-indicator="indicatorOption" data-radial-indicator-model="indicatorValue"></div>   
</div>

angular.module('myApp', ['ng-sortable','radialIndicator'])
        .controller('demo', ['$scope', function ($scope) {
            $scope.indicatorOption = {
                    radius : 80,
                    percentage :true,
                    barColor : "#87CEEB"
            };
             
            $scope.indicatorValue = 70;
        }]);

通过DI获取指示器的对象实例

<div ng-app="myApp" ng-controller="demo">
     <div data-radial-indicator="indicatorOption" data-radial-indicator-id="indicator1"></div>   
     <button data-ng-click="changeValue(30)"></button>
</div>

angular.module('myApp', ['ng-sortable', 'radialIndicator'])
    .controller('demo', ['$scope', 'radialIndicatorInstance', function($scope, radialIndicatorInstance) {
            $scope.indicatorOption = {
                percentage: true,
                barColor: "#87CEEB",
                initValue : 70
  };
   
  $scope.changeValue =
                function(val) {
                    radialIndicatorInstance['indicator1'].animate(30);
                }
    }]);

具体各种圆形指示器情况的使用方法请参考Demo。