소개
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 });
파기방법
진행률 표시줄을 제거하고 메모리를 해제합니다.위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.