Разработка WEB-интерфейса для ESP8266. Часть 4: асинхронные запросы и динамические стили

Автор Denis Lisitsin
Разработка WEB-интерфейса для ESP8266. Часть 4: асинхронные запросы и динамические стили

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

Мы понимали включено или выключено делать мы — это будем с помощью графических изображений. То есть когда были включены на кнопку будет накладываться изображение. А когда выключено другое для начала нам надо отменить все стили которые влияют на отображение кнопки в настоящий.

Давайте дополним наш фрагмент с отвечающие на текущий момент только за позиционирование кнопки несколькими новыми свойствами уберём рамку вокруг кнопки заводку отличается свойство Border можно указывать как толщину обводки например в пикселях.

А можно написать, что она отсутствует напишем, что отсутствует в наборе стиле и так и пишем Border None. Зачем нам надо убрать фон кнопки с прозрачным вместо серого напишем background-color transparent. Посмотрим, что получилось при. Фокусе курсора на кнопке вокруг неё появляется обводка её тоже надо убирать за — это дело отвечает свойство outline напишем outline None теперь водка появляться не будет надпись на кнопке нам кстати тоже не нужна убираем теперь нашёл вообще не видно на странице. Хоть она там есть приступим к её стерилизации в HTML есть несколько разных элементов — это строковые. Блочная и блоки внутри строки строковой элементы ведут себя как часть строки. То есть их можно встраивать в строки текста блочные элементы занимает прямоугольный угол страницы и если в стилях не оговаривается что-то другое то растягивается на всю ширину страницы блоки внутри строки с одной стороны ведут себя как. Строкова элементы, а с другой стороны как. Блочная то есть. Они снимают прямоугольную область. Но их можно встраивать в строки поскольку они не растягивается на всю ширину страницы если — это не определена стилями понимаю, что сейчас — это многим мало. Понятно походу наши занять будем встречаться с разными типами элементов и на их примерах я покажу, что всё — это значит кнопка у нас на экране будет заниматься прямоугольную область фоновое изображение которой будет меняться в зависимости статус реле то есть нам подойдёт либо блочные элементы либо блок внутри строки на самом деле можем выбрать. Давайте напишем, что кнопка должна отображаться как блок на 3 строки для этого добавим CSS свойство Display inline-block свойства дисплее как раз. Задай Кто как должен отображаться элемент на странице для определения блочного элемента мы бы написали блок для страховой Inline inline-block определяет отображение элемента как блок. Страйке теперь нам надо определиться с размерами на шее прямоугольной области. Я подготовил изображение включающий несколько значков которые мы будем использовать сегодня и в будущем посмотрим на него такие коллекции изображений называются спрайтами можно было бы предложить отдельные картинки соответствующие каждому состоянию реле. Но, тогда каждой из картинок загружалась бобра в момент первого обращения к ней и из-за того, что загрузка занимает некоторое время возникал бы эффект то есть когда первое изображение уже не отрисовывается, а второй еще не загружена на экране ничего не отображалось бы — это некрасиво преимущества. Спрайта в том, что он загружается сразу весь, а мы лишь описываем какую область проекта необходимо отображать в тот или иной момент времени. Поэтому выглядеть момент смены изображения всё будет. Чётко и все графические элементы отобразятся на странице одновременно они по мере их загрузки значит когда реле включено у нас фона блока будет выступать. Вот — это часть. Спрайта с зелёной кнопкой. А когда выключен. А то с красной размеру кнопки 300 на 130 пикселей. Давайте зададим такую ширину и высоту нашему блоку в CSS добавить свойство в то есть ширина 300 пикселей и свойствах ой то есть высота 130 пикселей едем дальше как мы разбирали ранее у каждого HTML Element быть атрибуты так например мы уже используем атрибута ID чтобы обрабатывать клики по нашей кнопки с помощью джаваскрипт есть ещё атрибут класс он как раз чаще всего используется для того чтобы стиль элемента которому этот класс присвоен у каждого элемента может быть несколько классов в этом случае они перечисляются значение атрибута. Через пробел также отличие атрибута класса. Отойди Что он на странице может быть несколько элементов с одинаковым значением этого атрибута — это удобно потому, что мы можем один раз описать класс все с, а затем присвоить его всем однотипным или на странице мы напишем отдельно класс для включённого реле и отдельные для выключенного зависимости от состояния реле мы будем с помощью GPS подставлять нужны класс в т кнопки динамически менять стилизацию этого элемента CSS Class описывается следующим образом сначала . затем слитно с не пишется название класса, а затем описывается его стиле — это к пишем стиль роли он здесь нам надо указать какой фоновое изображение будет использоваться при включить фоновые изображения присваивается с помощью свойства background URL указываю изображения которые будем использовать в качестве фона она будет лежать у нас в корне File System ACP. Поэтому просто указываем имя файла теперь нам надо указать в какую область нашего. Спрайта необходимо использовать в качестве фонового изображения для этого используем свойства композиция — это свойство принимает 2 аргументов смещения фоновое изображение по X и Y относительно левого верхнего угла блока для которого он служит фоном у нас кнопка занимает прямоугольный область шириной 300 и высотой 130 пикселей чтобы в этой области оказался фрагмент. Спрайта с зелёной кнопкой.

0 комментариев
0

Читайте также