js plug-in YprogressBar mencapai kemahiran effect_javascript bar kemajuan yang cantik

Pengenalan

YprogressBar ialah pemalam bar kemajuan berdasarkan HTML5.

YprogressBar ialah pemalam bar kemajuan ringan yang mudah digunakan, menggunakan sedikit sumber dan meniru antara muka penyahmampatan mampatan yang baik dengan paparan digital Ia juga menyokong penambahan parameter dalam huraian untuk memaparkan maklumat pelaksanaan yang lebih terperinci secara dinamik . Seperti kelajuan muat naik, baki masa, dsb.

Kod YprogressBar ditulis dengan ringkas dan mempunyai reka bentuk struktur yang munasabah, yang tidak akan mempunyai sebarang kesan buruk pada sistem anda.

Pratonton antara muka

Arahan penggunaan

Rujukan Fail

Hanya petik fail yprogressbar.css dan yprogressbar.js.

Ikhtisar Penggunaan

 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();

Perihalan parameter instan

Untuk menunjukkan gaya berorientasikan objek sepenuhnya, jika anda ingin menggunakan YprogressBar, anda mesti membuat instantiat, anda memerlukan beberapa parameter Semuanya adalah satu objek di bawah.

tajuk

Tajuk bar kemajuan, terangkan untuk tujuan bar kemajuan ini.

des

Untuk penerangan yang lebih terperinci tentang perkara yang ingin anda lakukan, anda boleh menulis satu ayat terus.

Kadangkala kami ingin melakukan sesuatu yang mewah, seperti memaparkan kelajuan muat naik, baki masa, dsb. YprogressBar menyokong anda sepenuhnya untuk melakukan ini Anda hanya perlu menambah pembolehubah pada huraian. }.

Contohnya: des: "Kelajuan muat naik: {{y:speed}}MB/saat, baki masa ialah kira-kira {{y:second}} saat", dengan {{y:speed}} dan {{y: second} } ialah pembolehubah.

Jika pembolehubah dinyatakan di sini, nilai pembolehubah mesti dinyatakan dalam parameter kedua apabila melakukan operasi kemas kini.

boleh ditutup

Panggilan balik kemusnahan. Setelah YprogressBar dimusnahkan, panggil balik ini akan dicetuskan sama ada kaedah musnah dipanggil secara manual atau pengguna mengklik butang tutup.

Apabila panggilan balik dicetuskan, dua parameter akan dihantar, iaitu: kemajuan pelaksanaan semasa dan nilai parameter dalam perihalan pada masa ini (objek mengandungi nama dan nilai).

kaedah tunjukkan

Tiada parameter diperlukan.

Bar kemajuan tidak akan dipaparkan sehingga kaedah persembahan dipanggil.

kaedah kemas kini

Kemas kini kemajuan, dua parameter.

Parameter pertama ialah kemajuan semasa, dinyatakan secara langsung sebagai nombor, contohnya: 26, mewakili 26%.

Parameter kedua ialah objek, yang perlu mengandungi nilai semua pembolehubah dalam keterangan. Jika tiada pembolehubah dalam perihalan, parameter ini boleh diabaikan.

Contohnya:

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

kaedah musnah

Musnahkan bar kemajuan dan lepaskan memori.

Lihat Di Github

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.