Laman web kunci/beku menggunakan jQuery

Tutorial ini menunjukkan bagaimana untuk mengunci sementara antara muka laman web menggunakan jQuery, mewujudkan kesan pembekuan masa. Ini berguna untuk pemaju yang perlu memeriksa kandungan dinamik atau skrip debug, atau untuk pereka laman web yang ingin mengawal interaksi pengguna semasa proses tertentu (seperti panggilan Ajax atau pemuatan pop timbul).

mengapa membekukan laman web?

Pembekuan menghalang interaksi pengguna sehingga tindakan tertentu selesai:

• selepas laman web selesai memuatkan.
• selepas permintaan Ajax selesai.
• selepas beban tetingkap pop timbul.

Membekukan laman web: Panduan langkah demi langkah

1. termasuk jQuery: tambah jquery.min.js dan jquery.uilock.js ke projek anda.

2. Melaksanakan kod jQuery: Kod yang disediakan terdiri daripada beberapa fungsi:

   • load_url(url): Membuka URL dalam tab atau tetingkap baru.
   • do_countdown(duration): Memaparkan pemasa undur.
   • update_clock(countdown_div, new_value): mengemas kini pemasa undur dan membuka kunci UI apabila selesai.
   • format_as_time(seconds): Format beberapa saat dalam beberapa minit dan saat.
   • view_blog_countdown(blog_url, duration): Membuka URL dan memulakan pemasa undur.

3. Sesuaikan kunci JQuery UI: fungsi $.uiLock() dan $.uiUnlock() mengawal penampilan visual halaman beku. Ubah suai CSS dalam fungsi ini untuk menyesuaikan gaya overlay (warna, kelegapan, dan lain -lain).

4. Mengintegrasikan HTML: HTML yang disediakan termasuk butang yang mencetuskan kesan pembekuan.

5. gaya dengan CSS: Kod CSS Styles Penampilan Pemasa Countdown.

coretan kod jQuery:

(Nota: Kod penuh disediakan dalam input asal dan harus digunakan untuk pelaksanaan.)

• pemasa Countdown: fungsi do_countdown dan update_clock menguruskan paparan pemasa.
• UI Lock/Unlock: fungsi $.uiLock dan $.uiUnlock menggunakan overlay mudah untuk membekukan halaman.
• pengendali acara: fungsi $(document).ready menetapkan acara klik untuk butang untuk memulakan pembekuan.

muat turun fail sumber: https://www.php.cn/link/09f6f87f06f60e9a8d8f633c84c381f2

Soalan Lazim (Soalan Lazim): (Soalan Lazim dari input asal adalah relevan dan memberikan maklumat yang berguna.) Bahagian ini ditinggalkan di sini untuk mengelakkan redundansi, tetapi anda harus merujuk kepada input asal untuk butiran ini.

Atas ialah kandungan terperinci Laman web kunci/beku menggunakan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!