Page Web de verrouillage / gel à l'aide de jQuery

Ce tutoriel montre comment verrouiller temporairement l'interface d'une page Web à l'aide de jQuery, créant un effet de gel chronométré. Ceci est utile pour les développeurs qui doivent inspecter le contenu dynamique ou déboguer les scripts, ou pour les concepteurs de sites Web souhaitant contrôler l'interaction des utilisateurs pendant des processus spécifiques (comme les appels Ajax ou le chargement contextuel).

Pourquoi congeler une page Web?

Le gel empêche l'interaction utilisateur jusqu'à ce que certaines actions se terminent:

• Une fois une page Web terminée le chargement.
• Une fois une demande Ajax terminée.
• après une fenêtre contextuelle se charge.

GÉLÉSING LA PAGE WEB: un guide étape par étape

1. Inclure jQuery: Ajouter jquery.min.js et jquery.uilock.js à votre projet.

2. Implémentez le code jQuery: Le code fourni se compose de plusieurs fonctions:

   • load_url(url): ouvre une URL dans un nouvel onglet ou une nouvelle fenêtre.
   • do_countdown(duration): Affiche une minuterie à rebours.
   • update_clock(countdown_div, new_value): met à jour le compte à rebours et déverrouille l'interface utilisateur une fois terminé.
   • format_as_time(seconds): Formats quelques secondes en minutes et secondes.
   • view_blog_countdown(blog_url, duration): ouvre une URL et démarre la minuterie à compte à rebours.

3. Personnalisez le verrou de jQuery UI: Les fonctions $.uiLock() et $.uiUnlock() contrôlent l'apparence visuelle de la page gelée. Modifiez le CSS dans ces fonctions pour ajuster le style de la superposition (couleur, opacité, etc.).

4. Intégrer le HTML: Le HTML fourni comprend un bouton qui déclenche l'effet de gel.

5. Style avec CSS: Le code CSS stylise l'apparence de la minuterie à compte à rebours.

Extraits de code jQuery:

(Remarque: le code complet est fourni dans l'entrée d'origine et doit être utilisé pour l'implémentation.)

• Countdown Timer: Les fonctions do_countdown et update_clock Gérer l'affichage de la minuterie.
• Lock / déverrouillage de l'UI: Les fonctions $.uiLock et $.uiUnlock utilisent une superposition simple pour geler la page.
• Handler d'événements: La fonction $(document).ready configure un événement de clic pour le bouton pour initier le gel.

Télécharger les fichiers source: https://www.php.cn/link/09f6f87f06f60e9a8d8f633c84c381f2

Questions fréquemment posées (FAQ): (Les FAQ de l'entrée d'origine sont pertinentes et fournissent des informations utiles.) Cette section est omise ici pour éviter la redondance, mais vous devez vous référer à l'entrée d'origine pour ces détails.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!