js插件YprogressBar实现漂亮的进度条效果


Posted in Javascript onApril 20, 2015

简介

     YprogressBar是一款基于HTML5的进度条插件。

     YprogressBar是一款轻量级进度条插件,使用方便,资源占用少,模仿好压的解压界面,带有数字显示,同时支持在描述中增加参数,以动态显示更详细的执行信息,比如上传速度、剩余时间等等。

     YprogressBar代码书写简洁,结构设计合理,不会给您的系统带来不良影响。

界面预览

 js插件YprogressBar实现漂亮的进度条效果

 使用说明

 文件引用

      只需引用yprogressbar.css和yprogressbar.js文件即可。

使用概览

var ypb = new YprogressBar({
  title: "正在上传文件...",
  des: "上传速度:{{y:speed}}MB/秒 剩余时间约{{y:second}}秒",
  closeable: true,
  cancelCallback: function(rate, vars){
 console.log(rate);
 console.log(vars);
  }
 });
 ypb.show();

 实例化参数说明

     为了尽显面向对象逼格,要想使用YprogressBar,总得实例化一下吧,而实例化的时候,是需要一些参数的,整体上就是一个object,具体参数接下来一一说明。

     title

          进度条标题,说明下这个进度条是干嘛的。

     des

          对要做的事情进行更详细的描述,可以直接写一句话。

          有时候我们想搞点花样,比如说显示上传速度、剩余时间什么的,YprogressBar完全支持你这样做,只需要在描述中加入变量即可,格式:{{y:name}}。

          例如:des: "上传速度:{{y:speed}}MB/秒 剩余时间约{{y:second}}秒",这里的{{y:speed}}和{{y:second}}就是变量。

          如果此处指定了变量,在做update操作时,必须在第二个参数中指定变量的值。

     closeable

          销毁回调。YprogressBar一旦被销毁,无论是手动调用destroy方法,还是用户点击关闭按钮,都会触发此回调。

          回调触发时,会传入两个参数,分别是:当前执行进度、此刻描述中的参数值(object中包含name、value)。

     show方法

          无需任何参数。

          调用show方法后进度条才会显示。

     update方法

          更新进度,两个参数。

          第一个参数是当前进度,直接用数字表示,例如:26,代表26%。

          第二个参数是一个object,需要包含描述中所有变量的值。如果描述中无变量,此参数可以忽略。

          例如:

ypb.update(26,{
 speed: 312,
 second: 5
 });

      destroy方法

           销毁进度条,释放内存。

View On Github

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
20个最新的jQuery插件
Jan 13 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
js操作label给label赋值及取label的值示例
Nov 07 Javascript
理解JS绑定事件
Jan 19 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
如何编写jquery插件
Mar 29 jQuery
微信小程序 request接口的封装实例代码
Apr 26 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
iview给radio按钮组件加点击事件的实例
Sep 30 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 Javascript
浅谈javascript中call()、apply()、bind()的用法
Apr 20 #Javascript
javascript中callee与caller的区别分析
Apr 20 #Javascript
javascript正则表达式中的replace方法详解
Apr 20 #Javascript
javascript正则表达式基础知识入门
Apr 20 #Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 #Javascript
Javascript实现颜色rgb与16进制转换的方法
Apr 18 #Javascript
JS解析XML文件和XML字符串详解
Apr 17 #Javascript
You might like
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
php探针不显示内存解决方法
2019/09/17 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
javascript制作2048游戏
2015/03/30 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
Javascript复制实例详解
2016/01/28 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
Python中文件操作简明介绍
2015/04/13 Python
Python中的ceil()方法使用教程
2015/05/14 Python
python修改字典内key对应值的方法
2015/07/11 Python
Python简单连接MongoDB数据库的方法
2016/03/15 Python
Python实现网站注册验证码生成类
2017/06/08 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
python列表使用实现名字管理系统
2019/01/30 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
成人继续教育实施方案
2014/03/01 职场文书
客户经理岗位职责
2015/01/31 职场文书
先进个人自荐书
2015/03/06 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书