基于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技术很烂的五个原因
Apr 26 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
Ajax实现不刷新取最新商品
Mar 01 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
Sep 21 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
vue无限轮播插件代码实例
May 10 Javascript
Vue 无限滚动加载指令实现方法
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 版本]
2007/03/20 PHP
关于php连接mssql:pdo odbc sql server
2011/07/20 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
PHP防盗链代码实例
2014/08/27 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
php5.6.x到php7.0.x特性小结
2019/08/17 PHP
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
详解vue2.0 资源文件assets和static的区别
2018/11/27 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
浅析JS中NEW的实现原理及重写
2020/02/20 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python程序设计入门(5)类的使用简介
2014/06/16 Python
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
机电一体化求职信
2014/03/10 职场文书
离婚协议书格式
2014/11/21 职场文书
北大自主招生自荐信
2015/03/04 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
2016大学迎新欢迎词
2015/09/29 职场文书