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";
参数名称 | 参数类型 | 默认值 | 描述 |
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。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!