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 相关文章推荐
input 高级限制级用法
Mar 26 Javascript
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 Javascript
JavaScript之WebSocket技术详解
Nov 18 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
4 种滚动吸顶实现方式的比较
Apr 09 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 Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
PHP 进程锁定问题分析研究
2009/11/24 PHP
php学习之运算符相关概念
2011/06/09 PHP
php根据身份证号码计算年龄的实例代码
2014/01/18 PHP
12个非常有创意的JavaScript小游戏
2010/03/18 Javascript
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
JS分页效果示例
2013/10/11 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
Bootstrap中datetimepicker使用小结
2016/12/28 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
vue proxy 的优势与使用场景实现
2020/06/15 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
python重试装饰器示例
2014/02/11 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
python实现梯度法 python最速下降法
2020/03/24 Python
英国最大的百货公司:Harrods
2016/08/18 全球购物
奥巴马开学演讲稿
2014/05/15 职场文书
总经理岗位职责范本
2015/04/01 职场文书
2015年公路养护工作总结
2015/05/13 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书
详解JS ES6编码规范
2021/05/07 Javascript
JavaScript实现队列结构过程
2021/12/06 Javascript
Python利用FlashText算法实现替换字符串
2022/03/31 Python