Node.js 플러그인 YprogressBar는 아름다운 진행률 표시줄 effect_javascript 기술을 구현합니다.

소개

YprogressBar는 HTML5 기반의 진행률 표시줄 플러그인입니다.

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를 사용하려면 인스턴스화해야 합니다. 인스턴스화할 때 몇 가지 매개변수가 필요합니다. 구체적인 매개변수는 하나씩 설명하겠습니다. 아래에.

제목

진행률 표시줄 제목, 이 진행률 표시줄의 용도를 설명하세요.

데스

하고 싶은 일에 대한 좀 더 자세한 설명을 원하시면 직접 한 문장으로 적어주시면 됩니다.

때로는 업로드 속도, 남은 시간 등을 표시하는 등 멋진 작업을 수행하고 싶을 때가 있습니다. YprogressBar는 이를 완벽하게 지원합니다. 설명에 변수를 추가하기만 하면 됩니다: {{y:name} }.

예: des: "업로드 속도: {{y:speed}}MB/초, 남은 시간은 약 {{y:초}}초입니다.", 여기서 {{y:speed}} 및 {{y: second} }는 변수입니다.

여기에 변수를 지정하면 업데이트 작업 수행 시 두 번째 파라미터에 변수 값을 지정해야 합니다.

닫기 가능

파기 콜백. YprogressBar가 소멸되면 소멸 메서드가 수동으로 호출되거나 사용자가 닫기 버튼을 클릭하더라도 이 콜백이 트리거됩니다.

콜백이 트리거되면 두 개의 매개변수, 즉 현재 실행 진행 상황과 현재 설명에 있는 매개변수 값(객체에 이름과 값이 포함됨)이 전달됩니다.

상영 방법

매개변수가 필요하지 않습니다.

show 메소드가 호출될 때까지 진행률 표시줄이 표시되지 않습니다.

업데이트 방법

업데이트 진행 상황, 매개변수 2개.

첫 번째 매개변수는 현재 진행률이며 숫자로 직접 표현됩니다(예: 26은 26%를 나타냄).

두 번째 매개변수는 객체로, 설명에 모든 변수의 값이 포함되어야 합니다. 설명에 변수가 없으면 이 매개변수를 무시할 수 있습니다.

예:

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

파기방법

진행률 표시줄을 제거하고 메모리를 해제합니다.

Github에서 보기

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.