Как распределяют jQuery код между разными версиями адаптивного макета?

Question

[Nik Gubin]

Добрый день.

Осваиваю адаптивную вёрстку. Что касается css - всё предельно ясно и вопросов не возникло, а вот jQuery в адаптивном макете не даёт мне покоя. Есть объект, к примеру. На десктопе на объект повешено несколько событий, но на мобильниках эти события уже не должны срабатывать. Как грамотно поступать в таких случаях? Неужели повесить событие onresize на окно и ставить переменную при переходе определённой точки между десктопной версией и мобильной? Т.е. на десктопе и на мобильнике события должны быть разными. Как делать правильно - я пока не знаю, а костыли всегда успею сколотить, но прогресса это не даст.

Второй вопрос, это перенос объектов по DOM'у. Так получилось, что в десктопной и мобильных версиях один объект расположен совершенно в разных местах. Есть практика, когда с помощью JS мы таскаем кусок кода туда-сюда?

Буду очень благодарен за ваши ответы. Надеюсь на понимание и отсутствие агра :-)

Answer 1

[Антон Щербаков]

1.

На десктопе на объект повешено несколько событий, но на мобильниках эти события уже не должны срабатывать.

Все верно. Пишем данные в глобал и при вызове события проверяем размеры.

h = windows.height
w = windows.width

$(window).resize(function() {
   h = windows.height;
   w = windows.width;
});

2.

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

Если вы ищите элемент элемент DOM с корня дерева и он имеет уникальное имя - то без разницы, все дело упирается только в то, сколько вы будете перебирать DOM-элементы. На счет привязки событий, писал в п.1, в зависимости от размера - можете привязать разные события.

3. Если у Вас появится дикое желание разделять не только РАЗМЕРЫ (вы упоминаете десктоп и мобильное устройство, но при этом они могут иметь одинаковые размеры экрана), то можете классифицировать девайс с помощью matthewhudson.me/projects/device.js

Comments

[Nik Gubin]

Огромное спасибо вам, Антон, за ответ!