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

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

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

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