如何在响应式设计中调用不同的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/->在主体数据属性中定义断点
• 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');
});

，但是只有在最大宽度为320px的情况下，该情况才会发生. 在上方的屏幕尺寸中，点击应返回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屋！