jQuery Capture Window Snippets Snippets

Cet article montre comment utiliser jQuery pour gérer les événements de redimension des fenêtres du navigateur, offrant diverses techniques et aborder des questions courantes.

Manipulation de redimensionnement de la fenêtre de base:

La méthode la plus simple utilise l'événement de jQuery resize:

<code class="language-javascript">$(window).resize(function(e) {
    let width = $(this).width();
    let height = $(this).height();
    console.log('Window resized to: ' + width + ' by ' + height);
});</code>

Cela enregistre les nouvelles dimensions de la fenêtre à la console sur chaque redimensionnement.

Rafraîchissement de la page sur la redimensionner (solution hacky):

Pour les situations nécessitant un actualisation de la page sur le redimensionnement (généralement pas recommandé), une approche basée sur le délai peut être utilisée pour une compatibilité plus large (IE8):

<code class="language-javascript">setTimeout(function() {
    $(window).resize(function(e) {
        clearTimeout(window.RT);
        window.RT = setTimeout(function() {
            location.reload(false); // false uses cache
        }, 300);
    });
}, 1000);</code>

Cela introduit un retard pour empêcher les appels récursifs pendant le redimensionnement.

Éléments de repositionnement sur redimensionner:

Cet exemple démontre le repositionnement d'une barre de navigation:

<code class="language-javascript">(function($, W) {
    function repositionNav() {
        let newTop = W.innerHeight - 300;
        newTop = Math.min(newTop, 550); // Max top position
        $('#navbar').css('top', newTop);
    }
    repositionNav();

    $(W).resize(function(e) {
        clearTimeout(W.RT);
        W.RT = setTimeout(repositionNav, 300);
    });
})(jQuery, window);</code>

La barre de navigation (#navbar) est repositionnée avec un léger retard.

Événement de redimensionnement débouché pour les performances:

Pour les performances plus lisses, en particulier avec un redimensionnement fréquent, une approche débouchée est supérieure:

<code class="language-javascript">(function($, sr) {
    let debounce = function(func, threshold, execAsap) {
        let timeout;
        return function() {
            let obj = this, args = arguments;
            function delayed() {
                if (!execAsap) func.apply(obj, args);
                timeout = null;
            }
            clearTimeout(timeout);
            timeout = setTimeout(delayed, threshold || 100);
        };
    };
    jQuery.fn[sr] = function(fn) {
        return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr);
    };
})(jQuery, 'smartresize');

$(window).smartresize(function() {
    // Your efficient resize code here
});</code>

Ceci utilise une fonction de débouchement pour limiter la fréquence de la manipulation des événements.

Questions fréquemment posées:

Le texte d'origine comprend également une section FAQ couvrant des sujets tels que:

• en utilisant .resize() vs .on('resize')
• déclenchant manuellement les événements de redimensionnement
• Suppression des gestionnaires d'événements de redimensionnement
• Obtenir des dimensions de fenêtre
• Gestion des événements de redimension sur des éléments autres que la fenêtre
• Debouncing pour l'optimisation des performances
• Compatibilité du navigateur croisé
• Prise en charge des appareils mobiles
• Gestion des événements de redimensionnement et de changement d'orientation ensemble.

Cette réponse révisée fournit une explication plus claire et plus concise des exemples de code et traite des concepts clés impliqués dans la gestion des événements de redimension des fenêtres avec jQuery. Il maintient l'image et son format d'origine.

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!