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
});
var progObj = radialIndicator('#indicatorContainer5' , {
showPercentage : false
});
|
全局参数选项
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 |
定义渊声巷指示器的刻度条颜色。如果提供一个颜色范围对象作为值，插件会将该范围的颜色插入（如果
interpolatetrue）在指定的位置。 |
| 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 |
方法
获取对象实例
$('#indicatorContainer').radialIndicator();
var radialObj = $('#indicatorContainer').data('radialIndicator');
var radialObj = radialIndicator('#indicatorContainer');
|
参数
下面的方法可以在初始化后获取一个参数的值或改变任何参数值。
var interpolate = radialObj.option('interpolate');
radialObj.option('interpolate',false);
radialObj.option('radius',60);
|
获取值
下面的方法可以获取或设置圆形指示器的刻度值。设置值是不会有动画效果的。
var curProgress = radialObj.value();
radialObj.value(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。
在线预览 网盘下载
郑重声明：
1 本资源来源于互联网，资源的版权归资源原作者所持有，受《中华人民共和国著作权法》等相关法律保护。
2 由于无法和原作者取得联系，所以上传的部分资源无法先通过原作者的同意就分享给大家了，如本资源侵犯了您（原作者）的权益，请联系我们（微信号 xiaohaimei1989），我们会立马删除您的资源，并向您表达诚挚的歉意！
3 本站是一个公益型网站，分享资源的目的在于传播知识，分享知识，收取一点点打赏的辛苦费是用于网站的日常运营开支，并非用于商业用途。
4 本站资源只提供学习和参考研究使用，使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。
