четверг, 8 апреля 2010 г.

Application Express: создание CSS-кнопки

Создание три кнопки вместо cтандартных в Apex:

  1. Home -> Application Builder -> Application 101 -> Shared Components -> Templates -> Button:

     1.1  Definition (для первой кнопки):
     <span class="buttons">  
     <a href="#LINK#" class="positive">  
      <img src="#IMAGE_PREFIX#themes/ThemeName/img/positive.png" alt=""/>  
       #LABEL#</a>  
     <span>  
    
     1.2 Definition (для второй кнопки):
     <span class="buttons">  
     <a href="#LINK#" class="negative">  
       <img src="#IMAGE_PREFIX#themes/ThemeName/img/negative.png" alt=""/>  
       #LABEL#</a>  
     </span>  
    
     1.3 Definition (для третьей кнопки):
     <span class="buttons">  
       <a href="#LINK#" class="regular">  
       #LABEL#</a>  
     </span>  
    
  2. Создать css-файл для описания кнопки:
     .buttons a, .buttons button{  
       display:block;  
       float:left;  
       margin:0 7px 0 0;  
       background-color:#f5f5f5;  
       border:1px solid #dedede;  
       border-top:1px solid #eee;  
       border-left:1px solid #eee;  
       font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;  
       font-size:12px;  
       line-height:130%;  
       text-decoration:none;  
       font-weight:bold;  
       color:#565656;  
       cursor:pointer;  
       padding:5px 10px 6px 7px; /* Links */  
     }  
     .buttons button{  
       width:auto;  
       overflow:visible;  
       padding:4px 10px 3px 7px; /* IE6 */  
     }  
     .buttons button[type]{  
       padding:5px 10px 5px 7px; /* Firefox */  
       line-height:17px; /* Safari */  
     }  
     *:first-child+html button[type]{  
       padding:4px 10px 3px 7px; /* IE7 */  
     }  
     .buttons button img, .buttons a img{  
       margin:0 3px -3px 0 !important;  
       padding:0;  
       border:none;  
       width:16px;  
       height:16px;  
     }  
     /* STANDARD */  
     button:hover, .buttons a:hover{  
       background-color:#dff4ff;  
       border:1px solid #c2e1ef;  
       color:#336699;  
     }  
     .buttons a:active{  
       background-color:#6299c5;  
       border:1px solid #6299c5;  
       color:#fff;  
     }  
     /* POSITIVE */  
     button.positive, .buttons a.positive{  
       color:#529214;  
     }  
     .buttons a.positive:hover, button.positive:hover{  
       background-color:#E6EFC2;  
       border:1px solid #C6D880;  
       color:#529214;  
     }  
     .buttons a.positive:active{  
       background-color:#529214;  
       border:1px solid #529214;  
       color:#fff;  
     }  
     /* NEGATIVE */  
     .buttons a.negative, button.negative{  
       color:#d12f19;  
     }  
     .buttons a.negative:hover, button.negative:hover{  
       background:#fbe3e4;  
       border:1px solid #fbc2c4;  
       color:#d12f19;  
     }  
     .buttons a.negative:active{  
       background-color:#d12f19;  
       border:1px solid #d12f19;  
       color:#fff;  
     }  
     /* REGULAR */  
     button.regular, .buttons a.regular{  
       color:#336699;  
     }  
     .buttons a.regular:hover, button.regular:hover{  
       background-color:#dff4ff;  
       border:1px solid #c2e1ef;  
       color:#336699;  
     }  
     .buttons a.regular:active{  
       background-color:#6299c5;  
       border:1px solid #6299c5;  
       color:#fff;  
     }  
    
  3. Загрузить данный файл на Web server (аналогично, тому как делается в Интеграции Oracle ApEx и extJS ).
  4. Загрузить следующие картинки в #IMAGE_PREFIX#themes/ThemeName/img:
    positive.png
    negative.png
  5. Получаются такие кнопки:




Комментариев нет:

Отправить комментарий

Рейтинг@Mail.ru Рейтинг блогов Protected by Copyscape Web Plagiarism Tool