Схват элемента body body и превращение его в переменную PHP

Я использую новый сайт, используя методы адаптивного дизайна и в основном используя CSS Media Queries, и это сработало очень хорошо. Однако в некоторых случаях мне нужно, чтобы получить ширину браузера, и я сделать это путем добавления <html> класс с этим изящным битом Fo JQuery:Схват элемента body body и превращение его в переменную PHP

(function($) { 
     //add drupal 7 specific code 
     Drupal.behaviors.getWidthTheme = { 
      attach: function(context, settings) { 
       //end drupal calls 

var w, html = $('html'), _window = $(window); 
_window.resize(onResize); 
function onResize() { 
w = _window.width(); 
if (w >= 310 && w < 480) html.addClass('mobile-320').removeClass('mobile-768').removeClass('desktop').removeClass('mobile-480'); 
else if (w >= 481 && w < 768) html.addClass('mobile-480').removeClass('mobile-768').removeClass('desktop').removeClass('mobile-320'); 
else if (w >= 768 && w < 960) html.addClass('mobile-768').removeClass('mobile-480').removeClass('desktop').removeClass('mobile-320'); 
else html.addClass('desktop').removeClass('mobile-480').removeClass('mobile-768').removeClass('mobile-320'); 
       } 
onResize(); 

      }}})(jQuery);

Код выше впрыскивает класс в <html> элемент, например, <html class="mobile-320"> и т. Д. В зависимости от ширины браузера или устройства.

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

<?php if ($mobile-320): ?> 
<!--do something--> 
<?php else : ?> 

<?php if ($mobile-480 || $mobile-768 || $desktop): ?> 
<!-- do some other thing --> 
<?php endif; ?>

В идеале эти классы захватываются из HTML-класса, который был оказанной. Тем не менее, я не уверен, что это может сработать, поскольку PHP должен отображаться на сервере, тогда как я вставляю HTML-класс через JQuery. Я в основном открыт для любого способа сделать это, а не устанавливать то, что у меня есть, но, надеюсь, вы получите эту идею.

источник

2012-02-25 Danny Englander

Я не думаю, что вы найдете простое исправление для этого, кроме использования, возможно, ajax для вызова этого кода после загрузки страницы или наличия целевой страницы с файлом cookie с JS, а затем вперед на сайт потом. Что делает код, который вы хотите избежать? – BenOfTheNorth

@BenGriffiths - У меня есть php-блоки с кодом внутри if-else, где, если это одна ширина, я хочу показать один блок, но если все остальные ширины, я хочу показать еще один блок. Конечно, я мог бы использовать мой существующий класс, чтобы просто сделать «display: none» для одного блока, но проблема с этим - это все, что нужно для загрузки кода, и я пытаюсь сделать этот легкий для мобильных устройств. Я думаю, вы правы, но это будет непросто. –

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

Я не совсем уверен, что понимаю, но, возможно, вы можете отправить другой запрос ajax, отправив имя класса, который вы только что вставили. ответ php может быть json-данными для контроля того, что вам нужно выполнить дальше, или это может быть html/javascript напрямую. это поможет увидеть больше вашего html/javascript.

$.getJSON('getDeviceActions.php', 
    { className: $('html').attr('class') }, 
    function(phpResult){ 
    if(phpResult.switchOffA == true) $('.divsel').hide(); //or what not 
    } 
});

Почему наклоняю вы делаете ваш коммутатор-заявление непосредственно в JavaScript, не спрашивая сервера, и что он собирается делать с информацией после этого?

источник

2012-02-25 00:21:33 mindandmedia

mindandmedia - я не могу сделать переключатель с Javascript, потому что есть динамический PHP, который должен быть выполнен в if-else. Чем больше я думаю об этом, тем больше думаю, что я принял неправильный подход. –

Вы можете поместить все классы в массив и передать этот массив в data:

var classes = $('html').attr('class').match(/\w+/g); 
$.ajax({ 
    type: 'post', 
    url: 'url.php', 
    data: { 
     classes: classes 
    } 
    success: function() { 
     // Blabla 
    } 
});

Btw, ваш первый кусок кода может быть уменьшен, если у вас есть только те классы, в $('html'):

if (w >= 310 && w < 480) { html.removeClass().addClass('mobile-320'); }

источник

2012-02-25 00:26:07 elclanrs

Схват элемента body body и превращение его в переменную PHP

ответ

Смежные вопросы