基于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获取文本节点之 text()/val()/html() 方法区别
Mar 01 Javascript
javascript基本类型详解
Nov 28 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
Nov 20 Javascript
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 Javascript
JS switch判断 三目运算 while 及 属性操作代码
Sep 03 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 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
微信 getAccessToken方法详解及实例
2016/11/23 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
JS表格组件神器bootstrap table使用指南详解
2017/04/12 Javascript
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
vue组件的写法汇总
2018/04/12 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
用pickle存储Python的原生对象方法
2017/04/28 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
Centos 升级到python3后pip 无法使用的解决方法
2018/06/12 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
简单了解Python3里的一些新特性
2019/07/13 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
班组长安全职责
2014/01/05 职场文书
建筑专业自荐信范文
2014/01/05 职场文书
学习委员自我鉴定
2014/01/13 职场文书
2014年会计工作总结
2014/11/27 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
转学证明范本
2015/06/19 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python