Первоначальный поиск ширины страницы и проверка ее после изменения размера браузера - PullRequest
Новая
       23

Первоначальный поиск ширины страницы и проверка ее после изменения размера браузера

3 голосов
/ 12 декабря 2011

У меня работает этот код, но он кажется мне неуклюжим, есть ли способ упростить?Суть в том, что я проверяю ширину страницы при загрузке страницы и показываю или скрываю div на основе этого (на основе того, является ли браузер шире или тоньше 480 пикселей).Затем, если пользователь изменяет размер окна браузера, я снова проверяю ширину и показываю / скрываю правильные элементы div.В любом случае это можно упростить с помощью jquery или просто js? 

function pageWidth() {
        return window.innerWidth != null? window.innerWidth: document.body != null? document.body.clientWidth:null;
    }
    //Show/hide the correct div when the page loads
    if (pageWidth() >= 480) {
        $(".siteSearchDropdown").css("display", "none");
        $(".siteSearchSelect").css("display", "block");
    }
    if (pageWidth() < 480) {
        $(".siteSearchDropdown").css("display", "block");
        $(".siteSearchSelect").css("display", "none");
    }
    // Show/hide the correct dropdown when the browser window is resized
    $(window).resize(function() {
        if (pageWidth() >= 480) {
            $(".siteSearchDropdown").css("display", "none");
            $(".siteSearchSelect").css("display", "block");
        }
        if (pageWidth() < 480) {
            $(".siteSearchDropdown").css("display", "block");
            $(".siteSearchSelect").css("display", "none");
        }
    });

Ответы [ 4 ]

4 голосов
/ 12 декабря 2011

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

$(window).resize(function() {
    if (pageWidth() >= 480) {
        $(".siteSearchDropdown").css("display", "none");
        $(".siteSearchSelect").css("display", "block");
    }
    if (pageWidth() < 480) {
        $(".siteSearchDropdown").css("display", "block");
        $(".siteSearchSelect").css("display", "none");
    }
}).trigger('resize');

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

var $siteSearchDrioopdown = $(".siteSearchDropdown"),
    $siteSearchSelect     = $(".siteSearchSelect");
$(window).resize(function() {
    if (pageWidth() >= 480) {
        $siteSearchDrioopdown.css("display", "none");
        $siteSearchSelect.css("display", "block");
    }
    if (pageWidth() < 480) {
        $siteSearchDrioopdown.css("display", "block");
        $siteSearchSelect.css("display", "none");
    }
}).trigger('resize');

Примечание: я упоминал, как код обработчика события resize запускается много раз при изменении размера браузера.Чтобы проверить это сами, просто добавьте этот код на страницу и наблюдайте за тем, как летает консоль разработчика: 

$(window).resize(function (e) {
    console.log(e);
});

После повторного просмотра кода вы можете выполнить дальнейшую оптимизацию, используя оператор if/else вместо выполнения командыpageWidth() функция дважды: 

var $siteSearchDrioopdown = $(".siteSearchDropdown"),
    $siteSearchSelect     = $(".siteSearchSelect");
$(window).resize(function() {
    if (pageWidth() >= 480) {
        $siteSearchDrioopdown.css("display", "none");
        $siteSearchSelect.css("display", "block");
    } else {//notice the change in structure so the `pageWidth()` function is only called once
        $siteSearchDrioopdown.css("display", "block");
        $siteSearchSelect.css("display", "none");
    }
}).trigger('resize');
2 голосов
/ 13 декабря 2011

Что-то вроде: 

function pageWidth() {
    return window.innerWidth || document.body.clientWidth;
}

function reconfig() {
    if (pageWidth() >= 480) {
        $(".siteSearchDropdown").hide();
        $(".siteSearchSelect").show();
    } else {
        $(".siteSearchDropdown").show();
        $(".siteSearchSelect").hide();
    }
}

$(window).resize(reconfig);

reconfig();
2 голосов
/ 12 декабря 2011

Если вы можете ориентироваться на CSS3-совместимые браузеры, вам следует взглянуть на медиа-запросы. В качестве альтернативы есть библиотеки javascript, такие как Respond , которые предоставляют те же функции для старых браузеров.

1 голос
/ 12 декабря 2011

Вам не нужна функция pageWidth(), просто используйте $(window).width().Кроме того, вам не нужно дублировать код, чтобы показать / скрыть div, создайте функцию для этого. 

function showHide() {
  var isBigLayout = $(window).width() > 480;
  $(".siteSearchDropdown").css("display", isBigLayout ? "none" : "block");
  $(".siteSearchSelect").css("display", isBigLayout ?  "block" : "none");
}


$(window).resize(showHide); //Run when resized
showHide(); // Run initially, or $(showHide) to run after DOM is loaded
...