setFlash сообщения в CakePHP используя эффекты jQuery

Всем привет, я хочу рассказать как можно изменить вид для сообщений setflash в CakePHP. Я не могу сказать что это сильно отличается от стандартных элементов, но я добавил CSS и jQuery эффекты. Теперь это смотрится иначе, не как обычное сообщение CakePHP. И так за дело.

1. Добавьте jQuery файл в ваш шаблон (layout) или представление (view). Вы можете скачать его отсюда http://code.jquery.com/jquery-1.4.4.min.js
2. Создайте новый файл с jQuery с таким содержимым:

   // Location : /app/webroot/js/flash.js
   $(document).ready(function(){ $('.cancel').click(function(){
   $(this).parent().parent().fadeOut(); return false; });
   });
   

3. Создайте элемент (element) или шаблон (layout) для сообщений. Если вы используюте CakePHP 1.2 или более старую версию, то вам необходимо создать шабло (layout). А если вы используюте CakePHP 1.3, то создавайте элемент (element).

   // Location for cakephp 1.3.x : /app/views/elements/flash_good.ctp
   // Location for cakephp 1.2.x : /app/views/layouts/flash_good.ctp
   <div><a href="javascript:void(0);"><img src="/<?php echo SITE_URL.SITE_ROOT; ?>/img/delete.png" alt="Close"></a></div>
   

   // Location for cakephp 1.3.x : /app/views/elements/flash_bad.ctp
   // Location for cakephp 1.2.6 : /app/views/layouts/flash_bad.ctp
   <div class="flash_bad"> <a href="javascript:void(0);" class="cancel"><img src="/img/delete.png" alt="Close"></a>
   // for cakephp 1.3.x echo $message;
   // for cakephp 1.2.x echo $content_for_layout;
   </div>
   

4. Теперь пришло время по играть с CSS. Добавьте следующий CSS код в ваш шаблон (layout) или создайте отдельный файл для него

   /* Location : /app/webroot/css/flash.css */
   .flash_good {
   background:none repeat scroll 0 0 #94DDF9;
   border:1px solid #69CFF6; float:left;
   margin:5px 10px;
   padding:3px;
   text-align:center;
   width:932px;
   border-radius:5px;
   behavior: url(border-radius.htc);
   -moz-border-radius: 5px;
   }
   .flash_bad {
   background:none repeat scroll 0 0 #FC7862;
   border:1px solid #ff0000;
   float:left; margin:5px 10px;
   padding:3px;
   text-align:center;
   width:932px;
   border-radius:5px;
   behavior: url(border-radius.htc);
   -moz-border-radius: 5px;
   }
   .flash_good img {
   float:right;
   }
   .flash_bad img {
   float:right;
   }
   

5. Это пример вашего основного шаблона (main layout)

   css('flash');
   echo $javascript->link('/js/jquery-1.4.4.js');
   echo $javascript->link('/js/flash.js');
   ?>
   

6. Этот пример демонстрирует как можно оформить контроллер (controller).

   function editprofile($username = null) {
   if (!empty($this->data)) {
   $save = $this->User->save($this->data['User']);
   if (!empty($save)) {
   $this->Session->setFlash('Your profile has been saved successfully.', 'flash_good');
   $this->redirect('/profile');
   } else {
   $this->Session->setFlash('An error occured!', 'flash_bad');
   $this->redirect('/profile');
   }
   }
   }
   

Вот и все. Я надеюсь, что это будет полезно для вас.

Оригинал статьи session setflash with cool jquery effects