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

Автор: Сергей Степанов

Поделиться @

Пока нет коментариев. Будьте первым!