bar kemajuan berbilang langkah jquery

Dengan perkembangan pesat teknologi Internet, semakin banyak aplikasi web perlu melakukan beberapa operasi yang kompleks, seperti menyerahkan borang ke pelayan bahagian belakang, memuat naik fail, dsb. Sebelum operasi ini selesai, pengguna tidak dapat mengetahui sama ada operasi itu berjaya, yang boleh menyebabkan ketidakpuasan hati pengguna dengan mudah. Oleh itu, untuk mengingatkan pengguna dengan lebih baik tentang kemajuan operasi yang sedang berjalan, bar kemajuan berbilang langkah telah wujud.

Artikel ini akan memperkenalkan bar kemajuan berbilang langkah berdasarkan jQuery Melalui bar kemajuan berbilang langkah, pengguna dapat memahami dengan jelas kemajuan operasi semasa, dengan itu mengelakkan ketidakpastian dalam proses operasi dan meningkatkan pengalaman pengguna. .

Idea pelaksanaan:

Untuk melaksanakan bar kemajuan berbilang langkah, langkah pertama ialah mencipta bekas bar kemajuan kosong dalam halaman, contohnya:

<div class="progress-bar">
    <div class="progress"></div>
</div>

Dibuat di sini Bekas bernama progress-bar, di mana progress berfungsi sebagai elemen untuk paparan kemajuan.

Seterusnya, perkenalkan perpustakaan jQuery dan pemalam jQuery bar kemajuan berbilang langkah tersuai ke dalam halaman:

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="progress.js"></script>

Kemudian, tentukan dan mulakan bar kemajuan:

rreee

Gunakan di sini Gunakan fungsi .progress() jQuery untuk memulakan bar kemajuan.

Seterusnya, kita perlu mengemas kini status bar kemajuan semasa operasi. Sebagai contoh, kami menggunakan fungsi setProgress() untuk mengemas kini status bar kemajuan:

<script>
    $(function(){
        $('.progress-bar').progress();
    });
</script>

Dalam fungsi startOp(), kami menggunakan fungsi $.ajax() untuk mensimulasikan operasi dan mengemas kini bar kemajuan semasa keadaan operasi.

Dalam bar kemajuan, kami menggunakan pilihan bernama steps untuk mentakrifkan nama setiap langkah bar kemajuan dan peratusan kemajuan yang sepadan dengan setiap langkah. Melalui fungsi setProgress(), kami boleh mengemas kini status bar kemajuan untuk memaparkan langkah dan kemajuan operasi semasa.

Kesan akhir:

Selepas langkah di atas, kami berjaya membina bar kemajuan berbilang langkah berdasarkan jQuery, merealisasikan paparan kemajuan semasa operasi, membolehkan pengguna memahami dengan jelas operasi semasa kemajuan, meningkatkan pengalaman pengguna.

Ringkasan:

Artikel ini memperkenalkan pelaksanaan bar kemajuan berbilang langkah berdasarkan jQuery, dan menunjukkan penggunaan bar kemajuan dengan mensimulasikan proses operasi tertentu. Bar kemajuan berbilang langkah ialah komponen web yang sangat praktikal yang boleh meningkatkan pengalaman pengguna dan mengelakkan ketidakpastian dengan berkesan semasa operasi. Dengan mahir menggunakan pelbagai kaedah jQuery, kami boleh dengan mudah melaksanakan bar kemajuan yang cantik untuk menambah warna pada aplikasi web.

Atas ialah kandungan terperinci bar kemajuan berbilang langkah jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!