Псевдоклассы
Псевдоклассы - это специальные команды, которые позволяют менять стиль элемента в зависимости от действий пользователя, а также положения этого элемента (тега) в общем потоке документа, что позволяет разбавить дизайн страницы некой динамикой и логикой.
Классическим примером применения псевдоклассов является ссылка, которая меняет свой цвет при наведении на неё курсора или ссылка, меняющая свой цвет после того, как по ней осуществили переход.
В Mobile SMARTS используются следующие псевдоклассы:
-
hover (для кнопок и списков) - определяет стиль элемента, на который наведён курсор мыши.
-
active (для кнопок и списков) - определяет стиль ссылки (элемента), которая становится активной, но переход по ней еще не совершен.
-
disabled (для кнопок) - определяет стиль кнопки с атрибутом enabled="False".
С помощью псевдоклассов в Mobile SMARTS можно делать динамичными кнопки и элементы списка. Рассмотрим подробнее.
-
Для кнопок
Возьмем за образец кнопку «Выйти» в окне успешной активации лицензии для продукта Frontol Simple Mobile. С помощью псевдоклассов можно сделать эту кнопку всегда активной, всегда неактивной или подсвечивать другим цветом в момент длительного нажатия.
Код кнопки
CSS
<button direction="return" width="20%" class="white_button" ><r color="#EF5981">ВЫЙТИ</r></button>
Css-класс white_button
-
Кнопка активна
CSS
} .white_button:active { background-color: #FFFFFF; corner-radius: 4%; font-size:14dp; border: 0px solid #1F3C5B; color: white; padding: 10dp 16dp 9dp 16dp;
-
-
Кнопка неактивна
CSS
} white_button:disabled { background-color: #6A7F8D; corner-radius: 4%; font-size:14dp; border: 0px solid #1F3C5B; color: white; padding: 10dp 16dp 9dp 16dp; } -
Кнопка меняет цвет при длительном нажатии.
CSS
} .white_button:hover { background-color: #FFFFFF; corner-radius: 4%; font-size:14dp; border: 0px solid #1F3C5B; color: white; padding: 10dp 16dp 9dp 16dp; -
Для элементов списка.
При длительном нажатии элемент списка подсвечивается другим цветом. Реализуется с помощью псевдоклассов active, disabled.
CSS
.list_item_custom { background-color: #EDF2F6; padding:0dp 0dp 5dp 0dp; } .list_item_custom:active { background-color: #919191; padding:0dp 0dp 5dp 0dp; } .list_item_custom:disabled { background-color: #6A7F8D; padding:0dp 0dp 5dp 0dp; }
В данном случае псевдоклассами являются hover, active, disabled. Для каждого случая задан свой атрибут background-color, что позволяет гибко регулировать цвет фона кнопки для разных случаев.