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 (по умолчанию) функция setup() вызывается единожды после // регистрации обработчика и не зависит от медиа-выражения (аналог 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, но для примера пусть будет так.
Комментарии
Люблю юзать Respond.js https://github.com/scottjehl/Respond
Он привносит в медиа запросы в жаваскрипте новые ивенты, например когда media перестал совпадать можно навесить собственный деструктор, а на новом медиа который совпал - снова инициализировать нужный кодю
А поточнее? Это вроде обычный css-полифил.
Оставить комментарий