基于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 相关文章推荐
jquery的颜色选择插件实例代码
Oct 02 Javascript
基于jquery的一个简单的脚本验证插件
Apr 05 Javascript
JQuery UI的拖拽功能实现方法小结
Mar 14 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
基于复选框demo(分享)
Sep 27 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 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
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
php计算一个文件大小的方法
2015/03/30 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
PYTHON压平嵌套列表的简单实现
2016/06/08 Python
Python解惑之整数比较详解
2017/04/24 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
基于python实现文件加密功能
2020/01/06 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
最新党员思想汇报
2014/01/01 职场文书
运动会通讯稿200字
2014/02/16 职场文书
公司年终奖分配方案
2014/06/16 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
被告代理词范文
2015/05/25 职场文书
人民币使用说明书
2019/04/17 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
python flask开发的简单基金查询工具
2021/06/02 Python
Python之matplotlib绘制折线图
2022/04/13 Python