Включить скрипт jQuery в нижний колонтитул только на мобильном устройстве и изменять размер
Я пытаюсь включить плагин jQuery от Codrops - который превращает меню в панель слева и снизу. Я бы хотел использовать то же меню, что и обычная верхняя панель на экранах рабочего стола, просто меняя стили идентификатора и классов, которые идут с демо. Мне было интересно, что является лучшим решением Javascript, чтобы включить скрипты плагина на максимальной ширине 768, а затем удалить их на что-нибудь большее. Я бы хотел, чтобы он самостоятельно проверял и обновлял браузер при изменении размера. Вот что у меня так далеко...
<script>
(function() {
if( window.innerWidth > 600 ) {
$.getSscript("assets/js/modernizr.custom.js");
$.getSscript("assets/js/classie.js");
$.getSscript("assets/js/borderMenu.js");
}
})();
</script>
1 ответ
Поэтому я провел небольшое исследование и, думаю, нашел альтернативный ответ. Он не связывает скрипты, но вы можете скопировать и вставить их в функцию, которая вызывается на экранах мобильных устройств.
Ниже приведен код, который я включил в нижней части моего нижнего колонтитула. Я связал все необходимые скрипты над этим кодом, чтобы он загружался на всех размерах экрана (плагин шел с собственным modernizer.js и использовал classie.js)
/////////////////////////////////
// MATCH MEDIA FOR MOBILE MENU //
/////////////////////////////////
/* JavaScript Media Queries */
if (matchMedia) {
//*change this to whatever size screens you'd like, I wanted mine to only work on 768 or below
var mq = window.matchMedia("(min-width: 768px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
//* Put jQuery plugin's code here
}
Пока все работает отлично. Дайте мне знать, если вы заметили что-либо, что можно изменить в приведенном выше коде.
Спасибо Крейгу Баклеру из OptimalWorks.net за его великолепное руководство и пример кода.