基于jQuery Bar Indicator 插件实现进度条展示效果


Posted in Javascript onSeptember 30, 2015

Bar Indicator是一款基于jQuery的进度条数据展示插件,它可应用于数据统计展示、投票统计以及任务进度等诸多场景中。它使用简单、选项丰富,几乎可以满足用户所有基于进度条的WEB设计需求,本文将结合实例给大家讲解Bar Indicator的使用。

基于jQuery 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为我们提供了丰富的选项设置和事件方法调用,诸如水平/垂直进度条、进度条颜色、数值展示、进度数值获取与重新设置等。

选项与方法

基于jQuery Bar Indicator 插件实现进度条展示效果

Bar Indicator非常强大,还有很多选项不本文就不一一列出。以上介绍就是关于基于jQuery Bar Indicator 插件实现进度条展示效果,更多内容请持续关注本站。

Javascript 相关文章推荐
JavaScript delete操作符应用实例
Jan 13 Javascript
javascrip关于继承的小例子
May 10 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
May 10 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
javascript中神奇的 Date对象小结
Oct 12 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
Oct 21 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 Javascript
Jquery的Ajax技术使用方法
Jan 21 jQuery
浅谈vue项目用到的mock数据接口的两种方式
Oct 09 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 26 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 #Javascript
浅谈Javascript中substr和substring的区别
Sep 30 #Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 #Javascript
js实现创建删除html元素小结
Sep 30 #Javascript
node.js下LDAP查询实例分享
Sep 30 #Javascript
Javascript中replace()小结
Sep 30 #Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 #Javascript
You might like
php在项目中寻找代码的坏味道(综艺命名)
2012/07/19 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
关于Python 3中print函数的换行详解
2017/08/08 Python
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
Python get获取页面cookie代码实例
2018/09/12 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
pandas 数据类型转换的实现
2020/12/29 Python
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
英国著名书店:Foyles
2018/12/01 全球购物
设计毕业生简历中的自我评价
2013/10/01 职场文书
销售代表求职自荐信
2013/10/01 职场文书
中职生自我鉴定范文
2013/10/03 职场文书
优秀党员转正的自我评价
2013/10/06 职场文书
离职保密承诺书
2014/05/28 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
借条如何写
2015/05/26 职场文书
地球上的星星观后感
2015/06/02 职场文书
湘江北去观后感
2015/06/15 职场文书
导游经典开场白——导游词
2019/04/17 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
Redis可视化客户端小结
2021/06/10 Redis