comment appeler différentes actions jquery dans un design responsive

J'en suis au point de convertir mon projet en responsive design.

Ce qui est le plus pratique et universel solution proposez-vous pour mettre en œuvre les différentes jQuery-blocs pour chaque point d'arrêt?

Je veux garder tous les scripts dans un fichier cause de nombre de http demandes.

C'est ce que j'ai trouvé:

  • breakpoint.js -> définir tous les points d'arrêt doublé en CSS & JS
  • http://responsejs.com/ -> définir des points d'arrêt dans les données du corps-attr
  • OnMediaQuery -> définir des noms lisibles pour les points d'arrêt (à mon humble avis mieux, parce que vous n'êtes pas lié à pixels)

Mon problème est, ils définissent tous les rappels, mais je ne sais pas comment lier ou d'annuler toute jQuery événement-auditeurs dans ces cas.

par exemple j'ai:

$('#selector').click( function() {
    alert('selector clicked');
});

mais qui ne devrait arriver si max-width de 320px.
Dans l'écran de la taille ci-dessus que le clic doit retourner false ou d'effectuer toute autre action

pour le moment, je n'ai pas la moindre idée de comment faire cela.

source d'informationauteur felixaburg

  1. 14

    Vous pouvez tout simplement créer votre propre points d'arrêt en JS. Quelque chose comme cela. Ajuster à vos besoins.

    var isBreakPoint = function (bp) {
    var bps = [320, 480, 768, 1024],
        w = $(window).width(),
        min, max
    for (var i = 0, l = bps.length; i < l; i++) {
      if (bps[i] === bp) {
        min = bps[i-1] || 0
        max = bps[i]
        break
      }
    }
    return w > min && w <= max
}

//Usage
if (isBreakPoint(480)) { ... } //Breakpoint between 320 and 480
  2. 6
    $('#selector').click(function() {
    if (parseInt($(window).width()) < 320) {
        ...
    }
});
  3. 1

    J'ai foiré autour avec certaines bibliothèques et des trucs et fini à l'aide de ce type de réactif à l'écoute. Il utilise les CSS media queries pour les points d'arrêt et UnderscoreJS pour un throttler. L'avantage que je vois, c'est que les points d'arrêt sont tous définis dans le CSS au lieu de fragmentée à travers les différents scripts.

    Exemple CSS @media des points d'arrêt à l'aide de :after sur le body:

    body:after {
    content: 'widescreen';
    display: none;
}
@media screen and (max-width: 1024px){
    body:after {
        content: "extra-large";
    }
}
@media screen and (max-width: 768px){
    body:after {
        content: "large";
    }
}
@media screen and (max-width: 640px){
    body:after {
        content: "medium";
    }
}
@media screen and (max-width: 480px){
    body:after {
        content: "small";
    }
}
@media screen and (max-width: 320px){
    body:after {
        content: "tiny";
    }
}

    Exemple auditeur script en attente d'incendie basé sur le contenu de body:after. Comme vous pouvez le voir il est défini comme 2 gammes dans cet exemple, pour afficher/masquer/déplacer/créer des widgets en fonction de l'équipement généralité:

    <script type ="text/javascript">
$(window).resize(_.debounce(function(e){
    var size = window.getComputedStyle(document.body,':after').content.replace(/"|'/g, ''),
        mobile = ["tiny", "small", "medium", "large"].indexOf(size),
        desktop = ["extra-large", "widescreen"].indexOf(size);

    $('.placehold').html('computed breakpoint: ' + size + '<br />mobile index = ' + mobile + '<br />desktop index = ' + desktop);

    if (mobile != -1) {
        $('.placehold2').html('mobile range');
    } else if (desktop != -1) {
        $('.placehold2').html('desktop range');
    }
}, 100)).trigger('resize');
</script>

    http://jsfiddle.net/Dhaupin/nw7qbdzx/ - Il suffit de les redimensionner le volet de sortie dans jsfiddle pour le tester.

    EDIT: Apparemment navigateurs rendre l' :après des contenus par l'intermédiaire window.getComputedStyle(document.body,':after').content différemment et insérer des guillemets simples et doubles. Ajout d'un remplacer de les frotter.

  4. 1

    Si vous êtes en utilisant Bootstrap 4 vous pouvez utiliser ce plugin jQuery pour vérifier ce point d'arrêt est défini par la vérification de la CSS la propriété d'affichage des éléments.

    https://jacoblett.github.io/IfBreakpoint/

    Puis l'utiliser comme 

    if ( xs == true ) { 
  alert("mobile first");
}

//Update on window resize
$( window ).resize( function(){
  $("h2").text( breakpoint ); 
});
  5. 0

    Si vous ciblez les navigateurs modernes (IE10 vers le haut, et non pas IE mobile), alors vous devriez utiliser la nouvelle window.matchMedia() méthode, les écarts entre les différents navigateurs comme à comment mesurer la largeur de la barre de défilement signifie que si vous utilisez par exemple window.width()il y aura une petite plage de pixels où la CSS se comporte différemment pour le JS (j'ai trouvé cela à la dure).

    De cet article pour plus de détails: https://www.fourfront.us/blog/jquery-window-width-and-media-queries

    Utiliser quelque chose comme ce qui suit afin que votre CSS et JS de travail exactement sur les mêmes points d'arrêt:

    if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide, write code specific for that */
} else {
  /* the viewport is less than 400 pixels wide, write code specific for that */
}

    Le Mozilla Developer Network a documenté ici: https://developer.mozilla.org/en/docs/Web/API/Window/matchMedia