<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

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

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

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Адаптивная вёрстка через jQuery

Адаптивная вёрстка через jQuery

В предыдущей статье мы разобрали медиа-запросы в CSS, которые являются ключевыми в адаптивной вёрстке. Но на практике не всегда получается одними стилями адаптировать сайт под небольшую ширину экрана. Поэтому приходится менять не только стили, но и структуру страницы. И в этой статье я покажу, как сделать адаптивную вёрстку через jQuery.

Разберём достаточно классическую задачу. Есть трёхколоночный сайт. И нам необходимо его адаптировать под ширину, например, 480px. Обычными стилями тут никак не обойтись, поэтому необходимо менять структуру. Самый простой способ - это просто всё содержимое правой колонки поставить вниз левой. То есть фактически, превратить трёхколоночный сайт в двухколоночный.

Это тоже пример адаптивной вёрстки, но уже через jQuery. Давайте с Вами это реализуем (не забудьте подключить библиотеку jQuery):

<script type="text/javascript">
  $(document).ready(function() {
    var w = $(window).width(); // Получаем ширину окна
    if (w <= 480) { // Если ширина окна меньше, либо равна 600
      $("#left").html($("#left").html() + $("#right").html()); // Копируем содержимое правой колонки в левую
      $("#right").remove(); // Удаляем правую колонку
    }
  });
</script>

Я думаю, что тут код достаточно прозрачный. Безусловно, без медиа-запросов в CSS тут не обойтись. В частности, у центральной колонки изначально есть margin-left и margin-right. И поскольку теперь правой колонки нет, то margin-right надо обнулить, и, тем самым, центральная часть увеличится, и уместить контент на небольших экранах станет значительно проще.

Таким образом, Вы теперь знаете всю необходимую теорию по адаптивной вёрстке через jQuery. А в большинстве случаев используются и jQuery, и медиа-запросы в CSS, поэтому и то, и другое надо обязательно знать.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (7):

Dima2000 Dima2000 15.03.2014 15:05:39

Михаил, а вы будите менять дизайн своего сайта? Просто заметил новый дизайн вашего сайта на продающей странице нового курса по сиэсэс 3 и аштиэмэль 5.

Ответить

alexandrdante alexandrdante 15.03.2014 15:24:02

Дмитрий,всё в работе. Из-за недостатка времени у Михаила - это не быстро. Естественно,дизайн будет изменён

Ответить

GoTo GoTo 18.03.2014 20:09:14

Друзья, есть обычный трехколоночный сайт. <div id="content"> <div id="left"></div> <div id="right"></div> <div id="center"></div> </div> Установил jQuery, проверил, работает. Но скрипт адаптивной верстки не работает. Куда нужно конкретно вставить этот код, чтобы скрипт заработал? Спасибо.

Ответить

tikkiwiki tikkiwiki 19.03.2014 14:29:04

Здравствуйте, Анатолий. А, где скрипт? Я не вижу. И впервые слышу о скрипте jQuery который делает адаптивную верстку. Скорее всего Вы не так поняли.

Ответить

GoTo GoTo 21.03.2014 13:56:04

Александр, спасибо. С этим разобрался. Теперь у меня такой вопрос. Как правильно написать условие? "Если ширина окна больше, либо равна 320 И меньше, либо равна 768"?

Ответить

Ucome Ucome 28.03.2014 22:30:49

if (w >= 320 AND w <= 768) // Если ширина окна больше, либо равна 320 И меньше, либо равна 768"

Ответить

SuperSonicFire SuperSonicFire 25.06.2016 07:22:36

Ещё плохо разбираюсь в JS; как сделать так, чтобы $(document).ready(function().. срабатывала при каждом изменении ширины окна? Я уже разобрался, что надо добавить в <body> атрибут onResize="...", но как заставить скрипт выполниться ещё раз? Ведь у функции нет имени.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.