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 相关文章推荐
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
May 01 Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 Javascript
浅谈JavaScript 浏览器对象
Jun 03 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 Javascript
Node.js复制文件的方法示例
Dec 29 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
JS实现的简单表单验证功能完整实例
Oct 14 Javascript
微信小程序如何连接Java后台
Aug 08 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 Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
2018/09/30 Javascript
electron制作仿制qq聊天界面的示例代码
2018/11/26 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
Python中__new__与__init__方法的区别详解
2015/05/04 Python
python对excel文档去重及求和的实例
2018/04/18 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
Python中一些深不见底的“坑”
2019/06/12 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
通过cmd进入python的步骤
2020/06/16 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
免费获得微软MCSD证书赶快行动吧!
2012/11/13 HTML / CSS
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
机电专业体育教师求职信
2013/09/21 职场文书
住宅使用说明书
2014/05/09 职场文书
2015年采购工作总结
2015/04/10 职场文书
会议通知
2015/04/15 职场文书
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
php实现自动生成验证码的实例讲解
2021/11/17 PHP