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

Последние изменения: 15.06.2021

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

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

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

  • hover (для кнопок и списков) — определяет стиль элемента, на который наведён курсор мыши.
  • active (для кнопок и списков) — определяет стиль ссылки (элемента), которая становится активной, но переход по ней еще не совершен.
  • disabled (для кнопок) — определяет стиль кнопки с атрибутом enabled= «False».

С помощью псевдоклассов в Mobile SMARTS можно делать динамичными кнопки и элементы списка. Для этого потребуется добавить строки кода (см. примеры ниже) в файл global.css, который находится на ПК в папке по пути «C:\ProgramData\Cleverence\Базы Mobile SMARTS\имя вашей базы\Documents» (путь указан по умолчанию). На ТСД этот файл дублируется, и может иметь названия global.css, global.android.css, global.cf.css.

Рассмотрим подробнее примеры кода для создания динамичных элементов.

  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; }

После того как вы внесли правки в файл global.css на ПК, потребуется удалить из папки «MobileSMARTSv3 --> Documents» на ТСД папку базы, для которой вы вносили изменения, и заново подключиться к ней. В противном случае внесенные правки не будут применены к приложению на ТСД.


Была ли статья полезна?
Спасибо за ваш отзыв!
Отзыв
Заполните, пожалуйста, данную форму, что конкретно вы не нашли, оставьте свои комментарии о работе сайта / полезности / сложности с навигацией
0/500