jQuery轻量级圆形进度指示器插件

简要教程

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.jsradialIndicator.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);
                }
    }]);                 

看了这篇教程,自己用在实际开发中,为什么只能写一次,只显示一次,之后就不显示了,好奇怪

$(function(){
            $('#indicatorContainer').radialIndicator({
                barColor: {
                    0: '#FF0000',
                    33: '#FFFF00',
                    66: '#0066FF',
                    100: '#33CC33'
                },
                percentage: true,
                radius:22,
                initValue:66
            });
            var two=$('.two').radialIndicator({
                barColor: {
                    0: '#FF0000',
                    33: '#FFFF00',
                    66: '#0066FF',
                    100: '#33CC33'
                },
                percentage: true,
                radius:22,
                initValue:10
            });  

感觉没毛病,就是不出来

 

李东辉
  • 版权声明: 本文源自 jQuery之家, 于2年前,由整理发表,共 4812字。
  • 原文链接:点此查看原文

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:49   其中:访客  32   博主  17

  1. avatar 工控资料窝 1

    已经收藏

  2. avatar 博客大全网 2

    不错的插件

  3. avatar 森云 5

    哈哈没有演示地址啊

  4. avatar 森云 5

    最好再陪个演示效果

  5. avatar 小易分享网 5

    不错学习了,谢谢分享! http://www.xevip.cn

  6. avatar 奇虎分享网 5

    不错哦,赞一个,求认识,求回访

  7. avatar 灰常记忆 1

    看着代码啥的就头疼

  8. avatar 博客大全网 2

    今日来访

  9. avatar 咸菜一点米 1

    只为一个小效果添个库,感觉亏了

  10. avatar 卢松松商城 2

    厉害 又学到不少知识 感谢博主啊

  11. avatar 猪OK网 1

    养猪行情www.zhuok.com

  12. avatar 森云 5

    你的博客挺火的啊,卢松松大人经常来看你

  13. avatar 湖北江天 2

    小插件,大作用哦!!!

  14. avatar 网赚测评 1

    专业

  15. avatar 社区O2O 3

    你的博客挺火的啊,因为我经常来看你!!

  16. avatar VIP灵儿网 5

    不错哦,赞一个,求认识,求回访 http://www.viplinger.cn

  17. avatar 整形视频 2

    这插件干嘛用的

  18. avatar 整形对比 1

    不错不错 这个很可以啊

  19. avatar 跨境电商外贸平台 2

    插件很好用 虽然流程处理复杂

  20. avatar 森云 5

    来看看你

  21. avatar 卢松松商城 2

    辛苦了,加油我们都一直在路上

  22. avatar 福州美贝尔整形医院 2

    小插件,大作用

  23. avatar 助美整形网 2

    很实用的东西

  24. avatar 小易分享网 5

    不错学习了,谢谢分享! 欢迎回访:http://www.3gwb.com

  25. avatar 穿衣搭配 2

    谢谢博主分享

  26. avatar 知网论文查重 2

    知网查重 http://www.cnkiceo.org/

  27. avatar www.tmcore.com 5

    感谢分享 祝您开心快乐每一天! 欢迎回访:www.tmcore.com

  28. avatar heart前端 1

    下面留言留下的网址没一个是正确的,都是乱七八糟的网站,为什么没有管理员来管理呢

    • avatar 李东辉

      @heart前端 开始没做过滤,后来有一些博客也已经关闭!实在不好意思

      • avatar heart前端 1

        @李东辉 博主,你的效果网址有吗,很想看看,现在正在做这个呢