Enquire.js - не соответствует событию при загрузке

Смотри эту скрипку.

enquire.register("screen and (max-width: 640px)", {
    match: function () {
        $("body").css("background","red");
    },
    unmatch: function () {
        $("body").css("background","blue");
    }
});

когда окно браузера составляет 640 пикселей или меньше при загрузке, тогда цвет фона будет установлен на красный. (т.е. называется событие матча). Однако, когда окно шире, чем 640 пикселей при загрузке, ничего не происходит, то есть событие unmatch не вызывается. Почему бы и нет? И есть ли способ заставить событие unmatch сработать, если нет соответствия с условием?

По сути, я хочу, чтобы запрос осуществлялся как оператор if-else, который вызывается немедленно.

Источник

2 ответа

Решение

Когда я разработал enquire.js, он предназначался для использования с RWD для мобильных устройств. Поэтому это предполагает, что вы используете прогрессивный подход к улучшению. То есть сопоставление вызывается, когда запрос совпадает, а сопоставление вызывается только в том случае, если совпадение уже произошло один раз (и запрос больше не совпадает). Это может показаться странным, но общий вариант использования - "сделать что-то, когда этот запрос соответствует, отменить, когда он больше не совпадает". Примером может быть преобразование элемента в область с вкладками на больших экранах и возвращение к сложенным элементам в противном случае:

enquire.register(desktopMediaQuery, {
  match : function() { 
    makeTabs(someElement);
  },
  unmatch : function() {
    makeStacked(someElement);
  }
};

Если вначале вызывалось несоответствие, когда запрос не совпадает, то вам нужно было бы добавить логику в обратный вызов несоответствия, чтобы проверить, не произошло ли совпадение (или еще хуже, но такая логика в makeStacked).

Если бы мы строго следовали прогрессивному улучшению, в вашем примере я бы просто использовал синий фон по умолчанию в CSS, добавил класс в match и удалил класс в unmatch:

enquire.register("screen and (max-width: 640px)", {
    match: function () {
        $("body").addClass("red-bg");
    },
    unmatch: function () {
        $("body").removeClass("red-bg");
    }
});

Хотя я предполагаю, что ваш пример - упрощенная версия того, что вы на самом деле хотите. Таким образом, другой подход заключается в использовании обратного вызова установки для покрытия случая по умолчанию:

enquire.register("(max-width: 640px)", {
    setup : function() {
        $("body").css("background","blue");
    },
    match : function() {
        $("body").css("background","red");
    },
    unmatch : function() {
        $("body").css("background","blue");
    }
});

Вы также можете использовать два медиазапроса, если это лучше всего соответствует вашим потребностям. Я думаю, что это лучше передает намерения, чем использование установки, как указано выше.

enquire.register("(max-width: 640px)", {
    match : function() {
        $("body").css("background","red");
    }
})
.register("(min-width: 641px)", {
    match : function() {
        $("body").css("background","blue");
    }
});

Вот скрипка, демонстрирующая оба подхода: http://jsfiddle.net/7Pd3m/

Источник

Inquire js предоставляет метод под названием setup внутри функции регистра, который запускается один раз (без обнаружения медиазапроса), когда вызывается обработчик регистра. Таким образом, вы можете расширить свой код, чтобы включить его следующим образом:

enquire.register("screen and (max-width: 640px)", {
    setup: function() {
     // do stuff here as soon as register is called.
    },
    match: function () {
        $("body").css("background","red");
    },
    unmatch: function () {
        $("body").css("background","blue");
    }
});

(ссылка на это из документации http://wicky.nillia.ms/enquire.js/)

Источник
Другие вопросы по тегам