如何在响应式设计中调用不同的 jquery 动作 [英] how to call different jquery actions in responsive design

问题描述

我正准备将我的项目转换为响应式设计.

I'm at the point to convert my project into an responsive design.

您建议为每个断点实现不同的 jQuery 块的最方便和通用的解决方案是什么?

What is the most handy and universal solution do you suggest to implement different jQuery-blocks for each breakpoint?

由于 http 请求的数量，我想将所有脚本保存在一个文件中.

I want to keep all scripts in one file cause of number of http-requests.

这就是我发现的:

• breakpoint.js -> 在 CSS & 中定义所有断点加倍JS
• http://responsejs.com/ -> 在 body data-attr 中定义断点
• OnMediaQuery -> 定义人类可读的名称断点(恕我直言更好，因为你不受像素约束)

• breakpoint.js -> define all breakpoints doubled in CSS & JS
• http://responsejs.com/ -> define breakpoints in body data-attr
• OnMediaQuery -> define human-readable names for the breakpoints (IMHO better, cause you're not bound to pixels)

我的问题是，它们都定义了回调，但我不知道在这些情况下如何绑定或取消任何 jQuery 事件侦听器.

My problem is, they all define callbacks, but I don't know how to bind or cancel any jQuery event-listeners in these cases.

例如我有:

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

但只有在最大宽度为 320 像素时才会发生这种情况.在上面的屏幕尺寸中，点击应返回 false 或执行任何其他操作

but that should only happen if in max-width of 320px. In screen-sizes above that the click should return false or perform any other action

目前，我不知道如何做到这一点.

at the moment, I don't have a clue how to accomplish this.

推荐答案

您可以在 JS 中创建自己的断点.像这样的东西.根据您的需要进行调整.

You can just create your own breakpoints in JS. Something like this. Adjust to your needs.

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

这篇关于如何在响应式设计中调用不同的 jquery 动作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！