Bar Indicator是一款基于jQuery的进度条数据展示插件,它可应用于数据统计展示、投票统计以及任务进度等诸多场景中。它使用简单、选项丰富,几乎可以满足用户所有基于进度条的WEB设计需求,本文将结合实例给大家讲解Bar Indicator的使用。
HTML
首先加载jQuery和Bar Indicator相关js文件以及css文件。
<link href="https://zhishitu.com" rel="stylesheet" />
<script src="/jquery.min.js"></script>
<script src="/jquery-barIndicator.js"></script>
<script src="/jquery.easing.1.3.js"></script>
知识兔由于使用了动画缓冲效果,记得把easing插件也加上,您可以下载源码包,这些文件都打包好了。然后在<body>中加上HTML:
<span id="bar">55lt;/span>
知识兔看到了吧,代码中数字55表示的就是这个进度条要展示的进度,默认是100,当然这个数字也可以在插件调用时定义好。
jQuery
准备好html后,然后开始调用Bar Indicator,只要一句代码:
<script>
$('#bar').barIndicator();
</script>
知识兔是不是非常的简单,当然要满足您的项目需求的话,还需要进行一些设置,而Bar Indicator为我们提供了丰富的选项设置和事件方法调用,诸如水平/垂直进度条、进度条颜色、数值展示、进度数值获取与重新设置等。
选项与方法
参数 | 描述 | 默认值 |
data | 如果是false,则会读取html中目标元素中的值,否则将使用data定义的数值。 | false |
style | 设置进度条样式,有水平(horizontal)和垂直(vertical)两种。 | horizontal |
animation | 是否启用进度条加载动画,true/false | true |
foreColor | 设置已完成的进度的颜色,默认false则读取的是css中的设置。 | false |
backColor | 设置整个进度条的背景色,默认false则读取的是css中的设置。 | false |
horTitle | 设置进度标题,如“已完成”。 | false |
numType | 设置数值展示样式,默认percent即百分数,也可以将数值设置为absolute,则不带‘%’ | percent |
numMin | 进度最小值。 | 0 |
numMax | 进度最大值。 | 100 |
vertBarWidth | 垂直进度条的宽度。 | 10 |
horBarHeight | 水平进度条的高度。 | 10 |
vertBarHeight | 设置垂直进度条的高度。可以设置为如:'line','18px','150%' | line |
milestones | 是否显示进度条上的刻度,默认在进度条上50%的位置会有一条线隔开。 | true |
方法 | ||
loadNewData | 加载新数据。比如用户重新输入数据后,调用此方法进度条会发生变化。 var data = 85; //Any number $('.myElement').barIndicator('loadNewData', [data]); | |
getPluginData | 获取进度数据。 $('.myElement').barIndicator(); //Call the getter and store it's value to a variablevar storedData = $('.myElement').barIndicator('getPluginData'); console.log(storedData.barLength); |
Bar Indicator非常强大,还有很多选项不本文就不一一列出,详情可以关注Bar Indicator项目官网:https://github.com/kapantzak/barIndicator。