Использование псевдоклассов в Mobile SMARTS

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

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

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

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

С помощью псевдоклассов в Mobile SMARTS можно делать динамичными кнопки и элементы списка. Для этого потребуется добавить строки кода (см. примеры ниже) в файл global.css, который находится на ПК в папке по пути «C:\ProgramData\Cleverence\Databases\имя вашей базы\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» на ТСД папку базы, для которой вы вносили изменения, и заново подключиться к ней. В противном случае внесенные правки не будут применены к приложению на ТСД.