Расположение элементов в мобильной и десктопной версиях сайта на JavaScript

16 просмотров Время на прочтение: 3 минут(ы)

Если сайт пишется на JavaScript и пустой HTML файл нужен только для включения JavaScript файла, то необходимо разное расположение элементов в десктопной и мобильной версиях сайта записать на JavaScript.

Будем считать, что когда внутренняя ширина окна не больше 800 пикселей, тогда это мобильная версия сайта. Для определения мобильной версии создадим переменную “isMobile”, у которой будет устанавливаться логическое значение – мобильная версия сайта или нет. А для определения внутренней ширины окна используем свойство “window.innerWidth”, содержащее ширину в пикселах. Это можно записать так:

В десктопной версии сайта элементы будут располагаться с помощью таблицы. Для создания таблицы понадобятся сама таблица, строки таблицы и ячейки таблицы. На языке CSS чтобы элемент HTML отображался как таблица, нужно для этого элемента использовать свойство и значение “display: table”, для отображения как строки таблицы – “display: table-row”, для отображение как ячейки таблицы – “display: table-cell”. В мобильной версии сайта таблица, её строки и ячейки будут отображаться как блоки друг под другом. На языке CSS для них будет использоваться свойство и значение “display: block”. На языке JavaScript для задания свойства “display” будет использоваться конструкция “el.style.display = ‘value'”, где “el” – элемент HTML, а “value” – значение свойства “display”. Выполнять действия при мобильной версии сайта или десктопной будет конструкция “if(isMobile) MobAction; else DesAction;”, где “MobAction” – действия выполняемые при мобильной версии, а “DesAction” – при десктопной.

Таблицу будет представлять переменная “table”, строку таблицы – “row” и ячейку “cell”. Создаваться таблица, её строка и ячейка будут через конструкцию “el = document.createElement(‘div’);”, где “el” – создаваемый элемент. Добавляться таблица в веб-страницу, строка в таблицу и ячейка в строку будут с помощью конструкции “par.appendChild(el);”, где элемент “el” добавляется в элемент “par”.

Таблица, её строка и ячейка будут создаваться отдельными функциями – “createTable”, “createRow” и “createCell” соответственно. Эти функции можно записать так:

Для добавления текста в текущую ячейку таблицы используем следующую функцию, где “txt” – добавляемый текст:

Изменим функцию создания ячейки таблицы так, чтобы ячейка была с чёрными текстом и рамкой, а также выравнивание текста было по центру ячейки:

Изменим функцию создания самой таблицы, чтобы таблица занимала всю ширину окна и было слияние рамок ближайших ячеек:

Установим белый цвет фона страницы. Создадим таблицу. Добавим к неё строки, к строкам ячейки, а к ячейкам текст. Для десктопной версии установим ширину второго столбца таблицы – 80%, а высоту второй строки таблицы – 200 пикселов. Это реализует следующий код:

Весь код примера:

Вид в десктопной версии:

Вид в мобильной версии:

Таким образом можно создать десктопную и мобильную версии сайта на JavaScript.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

©2024 Шигорин Сергей Владимирович
Мы используем cookie-файлы для наилучшего представления нашего сайта. Продолжая использовать этот сайт, вы соглашаетесь с использованием cookie-файлов.
Принять
Top.Mail.Ru
Каталог сайтов Всего.ру
Белый каталог сайтов PopCat.ru