基于jQuery Bar Indicator 插件实现进度条展示效果
更新时间：2015年09月30日 14:28:21 投稿：mrr
这篇文章主要介绍了基于jQuery Bar Indicator 插件实现进度条展示效果的相关资料,需要的朋友可以参考下
Bar Indicator是一款基于jQuery的进度条数据展示插件，它可应用于数据统计展示、投票统计以及任务进度等诸多场景中。它使用简单、选项丰富，几乎可以满足用户所有基于进度条的WEB设计需求，本文将结合实例给大家讲解Bar Indicator的使用。
HTML
首先加载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为我们提供了丰富的选项设置和事件方法调用，诸如水平/垂直进度条、进度条颜色、数值展示、进度数值获取与重新设置等。
选项与方法
Bar Indicator非常强大，还有很多选项不本文就不一一列出。以上介绍就是关于基于jQuery Bar Indicator 插件实现进度条展示效果，更多内容请持续关注本站。
您可能感兴趣的文章:
- android实现ViewPager的Indicator的实例代码
- Android实现Tab布局的4种方式（Fragment+TabPageIndicator+ViewPager）
- 教你制作Android中炫酷的ViewPagerIndicator(不仅仿MIUI)
- Android 利用ViewPager+GridView实现首页导航栏布局分页效果
- Android 中 TabHost与ViewPager结合实现首页导航效果
- Android 开发之BottomBar+ViewPager+Fragment实现炫酷的底部导航效果
- Android ViewPager制作新手导航页(动态加载)
- iOS中UIActivityIndicatorView的用法及齿轮等待动画实例
- Android改变ExpandableListView的indicator图标实现方法
- Android动态给ViewPager添加Indicator导航
相关文章
这篇文章主要介绍了jQuery xml字符串的解析、读取及查找方法,涉及jQuery方法针对xml字符串的解析、读取及遍历查询等操作相关技巧,需要的朋友可以参考下2016-03-03
jQuery中常用getJSON来调用并获取远程的JSON字符串，将其转换为JSON对象，如果成功，则执行回调函数。2011-03-03
jqPaginator结合express实现分页展示内容效果
这篇文章主要为大家详细介绍了jqPaginator结合express实现分页展示内容效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
Jquery ajax加载等待执行结束再继续执行下面代码操作
这篇文章主要介绍了Jquery ajax加载等待执行结束再继续执行下面代码操作的相关资料,需要的朋友可以参考下2015-11-11
这篇文章主要介绍了jquery如何自定义表格样式，分别实现三种样式：默认状态（灰白相间），鼠标悬浮状态（绿色），鼠标点击状态（黄色），感兴趣的小伙伴们可以参考一下2015-11-11
如果你想你的博客页面某些部分引起读者的注意，你可以使这些部分震动，如广告等等，今天这篇文章将介绍怎样使你的页面中的元素震动起来,感兴趣的你可不要错过了哦，或许对你学习jquery ui 有所帮助2013-02-02
这篇文章介绍了jQuery选择器的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
这篇文章主要介绍了如何在jQuery中跳转到另外一个网页HTML，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了jquery判断当前浏览器的实现代码,需要的朋友可以参考下2015-11-11
jQuery结合jQuery.cookie.js插件实现换肤功能示例
这篇文章主要介绍了jQuery结合jQuery.cookie.js插件实现换肤功能,结合实例形式分析了jQuery.cookie.js插件的常用函数功能及实现换肤功能的相关操作技巧,需要的朋友可以参考下2017-10-10
最新评论