xandeadx.ru Блог музицирующего веб-девелопера

Javascript → enquire.js — работа с медиа-выражениями в javascript

Опубликовано в

enquire.js — это небольшая (2.2kb) javascript библиотека позволяющая детектить медиа-выражения. Библиотека не зависит от jQuery и других либ. Работает в браузерах с поддержкой matchMedia.

Пример использования — при размере экрана браузера меньше 980px нужно переместить блок из шапки в сайдбар:

enquire.register('screen and (max-width: 980px)', {
  // Вызывается, когда медиа-выражение начинает удовлетворять правилу
  match: function() {
    // Перемещаем блок .myblock из .page-header в конец .page-sidebar
    $('.page-header .myblock').appendTo('.page-sidebar');
  },
  // Вызывается, когда медиа-выражение перестаёт удовлетворять правилу
  // (например изменились размеры браузера)
  unmatch: function() {
    // Возвращаем блок назад в шапку
    $('.page-sidebar .myblock').appendTo('.page-header');
  },
});

Ещё пример — для экрана больше 980px подгружать AJAX-ом новый блок:

enquire.register('screen and (min-width: 980px)', {
  // При опции deferSetup:false (по умолчанию) вызывается единожды после регистрации
  // обработчика и не зависит от медиа-выражения (аналог dom ready).
  // При опции deferSetup:true вызывается единожды при первом удовлетворении
  // медиа-выражения (аналог единоразового match).
  setup: function() {
    // Подгружаем в сайдбар новый блок
    $.get('/get-myblock', function(html) {
      var $myblock = $('<div class="myblock">' + html + '</div>');
      $myblock.appendTo('.page-sidebar');
    });
  },
  deferSetup: true,
  match: function() {
    // Показываем блок .myblock
    $('.page-sidebar .myblock').show();
  },
  unmatch: function() {
    // Скрываем блок .myblock
    $('.page-sidebar .myblock').hide();
  },
});

Скрытие и показ блока логичнее вынести в css, но для примера пусть будет так.

Похожие записи

Комментарии RSS

Люблю юзать Respond.js https://github.com/scottjehl/Respond
Он привносит в медиа запросы в жаваскрипте новые ивенты, например когда media перестал совпадать можно навесить собственный деструктор, а на новом медиа который совпал - снова инициализировать нужный кодю

А поточнее? Это вроде обычный css-полифил.

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании