基于jQuery的进度条展示效果

首页 > 交流论坛 > 开放平台 > 资源分享基于jQuery的进度条展示效果

宽屏浏览

bitman

0主题 0跟帖 0精华

用户组：普通会员

loading

积分 0

注册时间：2016-03-27

基于jQuery的进度条展示效果复制链接

发布于：2016-03-27 16:28:39 | 查看所有 | 关注作者 |本帖最后由 bitman 于2016-03-27 编辑楼主

首先加载jQuery和Bar Indicator相关js文件以及css文件。

<link href="bi-style.css" 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 variable var storedData = $('.myElement').barIndicator('getPluginData'); console.log(storedData.barLength);