0

0

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

php中文网

php中文网

发布时间:2016-05-16 16:03:10

|

1766人浏览过

|

来源于php中文网

原创

简介

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

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

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

界面预览

立即学习Java免费学习笔记(深入)”;

 

 使用说明

 文件引用

      只需引用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}}就是变量。

sematic
sematic

一个开源的机器学习平台

下载

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

     closeable

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

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

     show方法

          无需任何参数。

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

     update方法

          更新进度,两个参数。

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

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

          例如:

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

      destroy方法

           销毁进度条,释放内存。

View On Github

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

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

js

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
vlookup函数使用大全
vlookup函数使用大全

本专题整合了vlookup函数相关 教程,阅读专题下面的文章了解更多详细内容。

26

2025.12.30

金山文档相关教程
金山文档相关教程

本专题整合了金山文档相关教程,阅读专题下面的文章了解更多详细操作。

28

2025.12.30

PS反选快捷键
PS反选快捷键

本专题整合了ps反选快捷键介绍,阅读下面的文章找到答案。

25

2025.12.30

表格中一行两行的方法
表格中一行两行的方法

本专题整合了表格中一行两行的相关教程,阅读专题下面的文章了解更多详细内容。

3

2025.12.30

cpu温度过高解决方法大全
cpu温度过高解决方法大全

本专题整合了cpu温度过高相关教程,阅读专题下面的文章了解更多详细内容。

5

2025.12.30

ASCII码介绍
ASCII码介绍

本专题整合了ASCII码相关内容,阅读专题下面的文章了解更多详细内容。

31

2025.12.30

GPS是什么
GPS是什么

本专题整合了GPS相关内容,阅读专题下面的文章了解更多详细内容。

3

2025.12.30

wifi拒绝接入
wifi拒绝接入

本专题整合了wifi拒绝接入相关教程,阅读下面的文章了解更多详细方法。

9

2025.12.30

丰网速运介绍
丰网速运介绍

本专题整合了丰网速运查询入口以及相关内容,阅读专题下面的文章了解更多内容。

3

2025.12.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WEB前端教程【HTML5+CSS3+JS】
WEB前端教程【HTML5+CSS3+JS】

共101课时 | 8.1万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号