基于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的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
js实现addClass,removeClass,hasClass的函数代码
Jul 13 Javascript
用javascript作一个通用向导说明
Aug 30 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
从零开始搭建一个react项目开发
Feb 09 Javascript
js的新生代垃圾回收知识点总结
Aug 22 Javascript
微信小程序音乐播放器开发
Nov 20 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 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 Token(令牌)设计
2008/03/15 PHP
PHP similar_text 字符串的相似性比较函数
2010/05/26 PHP
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
PHP导入Excel到MySQL的方法
2011/04/23 PHP
PHP获取url的函数代码
2011/08/02 PHP
ajax在joomla中的原生态应用代码
2012/07/19 PHP
php中的常用魔术方法总结
2013/08/02 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
动态添加js事件实现代码
2009/03/12 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
使用JS获取页面上的所有标签
2018/10/18 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
Python3 能振兴 Python的原因分析
2014/11/28 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
关于.NET, HTML的五个问题
2012/08/29 面试题
医护人员英文求职信范文
2013/11/26 职场文书
公司庆典活动邀请函
2014/01/09 职场文书
房地产财务管理制度
2014/02/02 职场文书
房产继承公证书
2014/04/09 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
三年级上册科学教学计划
2015/01/21 职场文书