Загрузка javascripts через различные медиа-запросы - PullRequest
Новая
       26

Загрузка javascripts через различные медиа-запросы

0 голосов
/ 16 ноября 2011

У меня есть некоторый javascript для скользящих меню, но мне нужно, чтобы некоторые значения были разными для экранов разных размеров.

Это мой сценарий для справки: 

    $('.show-menu').on('click', function () {
        if ($(".menu-button").html() == 'CLOSE') {
            $("#slideover").animate({
                right: "0"
                }, 300);
            $(".black-cover").fadeOut(300);
            $(".menu-button").html('MENU');
                } else {
            $("#slideover").animate({
                right: "512px"
                }, 300);
            $(".black-cover").fadeIn(300);
            $(".menu-button").html('CLOSE');
            }
        });

Мой вопрос заключается в том, чтоМожно ли загрузить в файлы .js сценарии, аналогичные приведенному ниже запросу ссылки? 

<link rel="stylesheet"
      media="only screen and (orientation:landscape) and (orientation:portrait)" href="ipad.css">

<link rel="stylesheet"
      media="only screen and (-webkit-min-device-pixel-ratio: 1.5) and (-o-min-device-pixel-ratio: 3/2) and (min-device-pixel-ratio: 1.5)" href="iphone.css">

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

ОБНОВЛЕНИЕ, Спасибо за 3 ответа, я вижу, что все они работают beaut.

Я собираюсь попробовать их все и перепостить тот, который работает быстрее всего.и самый легкий: -)

Опять же, спасибо

Ответы [ 3 ]

3 голосов
/ 16 ноября 2011

Использование window.matchMedia().Вот такое заполнение: https://github.com/paulirish/matchMedia.js

Если вы хотите загружать разные файлы сценариев, в зависимости от того, какой медиа-запрос в настоящее время соответствует, вы можете объединить вышеперечисленное с загрузчиком сценариев, таким как LAB.js или yepnope .

1 голос
/ 16 ноября 2011

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

Так что мое решение основано на эффектах ваших медиа-запросов CSS. Он добавляет слушателя к window.resize() событию и загружает сценарии , если ширина элемента макета изменилась .

Например, если у вас есть следующий код медиа-запроса: 

#changeTarget{
    width: 300px;
}
@media only screen and (min-width: 480px) {
    #changeTarget{
        width: 420px;
    }
}
@media only screen and (min-width: 768px) {
    #changeTarget{
        width: 600px;
    }
}
@media only screen and (min-width: 992px) {
    #changeTarget{
        width: 900px;
    }
}

Тогда javascript выглядит примерно так: 

var prevWidth; //previous width used for comparison
var detector; //the element used to compare changes

$(document).ready(function(){

    //set the initial values
    detector = $('#changeTarget');
    //Cache this width for later comparison
    prevWidth = detector.width();

    $(window).resize(function(){
        //If a change has happened, record this updated width and load your js
        if(detector.width()!=prevWidth){
            prevWidth = detector.width();

            // Load the JS files

        }

    });

});
1 голос
/ 16 ноября 2011

Я бы использовал плагин animate to class , чтобы я мог определить свойство right css в таблицах стилей

...