Псевдоклассы

Последние изменение: 10.12.2018

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

Классическим примером применения псевдоклассов является ссылка, которая меняет свой цвет при наведении на неё курсора или ссылка, меняющая свой цвет после того, как по ней осуществили переход.

В Mobile SMARTS используются следующие псевдоклассы:

  • hover (для кнопок и списков) - определяет стиль элемента, на который наведён курсор мыши.

  • active (для кнопок и списков) - определяет стиль ссылки (элемента), которая становится активной, но переход по ней еще не совершен.

  • disabled (для кнопок) - определяет стиль кнопки с атрибутом enabled="False".

С помощью псевдоклассов в Mobile SMARTS можно делать динамичными кнопки и элементы списка. Рассмотрим подробнее.

  1. Для кнопок

    Возьмем за образец кнопку «Выйти» в окне успешной активации лицензии для продукта 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;

    В данном случае псевдоклассами являются hover, active, disabled. Для каждого случая задан свой атрибут background-color, что позволяет гибко регулировать цвет фона кнопки для разных случаев.

  2. Для элементов списка.

    При длительном нажатии элемент списка подсвечивается другим цветом. Реализуется с помощью псевдоклассов 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; }