Yii - Использование CJuiDialog для создания модальных окон

18.08.2011

jQuery UI DialogСоздание диалоговых окон при помощи CJuiDialog (обертка для jQuery UI)

Разберем создание диалоговых окон yii на примере формы обратной связи:

Использование CJuiDialog

Форма выше появляется при нажатии на ссылке “Оставьте номер”.

1) Первое, что нам нужно сделать - создать модель:

class QuickForm extends CFormModel
{
    public $name;
    public $phone;
    public $timeToCall;
 
    public function rules()
    {
        return array(
            array('name, phone', 'required'),
            array('timeToCall', 'safe'),
        );
    }
 
    public function attributeLabels()
    {
        return array(
            'name'=>'Ваше имя',
            'phone'=>'Телефон',
            'timeToCall'=>'Время звонка',
        );
    }
}

2) Т.к. ссылка на форму видна на каждой странице сайта, в /views/layouts/main.php вставляем следующий код:

beginWidget('zii.widgets.jui.CJuiDialog', array(
                    'id' => 'mydialog',
                    'options' => array(
                        'title' => 'Отправить сообщение',
                        'autoOpen' => false,
                        'modal' => true,
                        'resizable'=> false
                    ),
                ));
                $qForm = new QuickForm;
 
                $form = $this->beginWidget('CActiveForm', array(
                            'id' => 'quick-form',
                            'enableClientValidation' => true,
                            'clientOptions' => array(
                                'validateOnSubmit' => true,
                            ),
                            'action' => array('site/quick'),
                        ));
                ?>
     
                    errorSummary($qForm); ?>
             
                        labelEx($qForm,'name'); ?>
                        textField($qForm,'name', array('size'=>35)); ?>
                        error($qForm,'name'); ?>
     
                        labelEx($qForm,'phone'); ?>
                        textField($qForm,'phone', array('size'=>35)); ?>
                        error($qForm,'phone'); ?>
         
                        labelEx($qForm,'timeToCall'); ?>
                        textField($qForm,'timeToCall', array('size'=>35)); ?>
                        error($qForm,'timeToCall'); ?>
             
                 
                        
                 
                endWidget();
                $this->endWidget('zii.widgets.jui.CJuiDialog');
                ?>

3) Осталось только написать сам экшен (site/quick):

public function actionQuick() {
        $model=new QuickForm;
            $model->attributes=$_POST['QuickForm'];
            if($model->validate()) {
                $headers="From: light-net@light-net.ru\r\nReply-To: light-net@light-net.ru";
                $body = "\n\nОтправитель: ".$model->name."\t Телефон: ".$model->phone."\t Время звонка: ".$model->timeToCall;
                mail(Yii::app()->params['adminEmail'],'ПЕРЕЗВОН!',$body,$headers);
            }
        $this->redirect(array('site/index'));
}

Видно, что содержимое формы будет отправлено нам на e-mail.

4) Ну и добавляем ссылку на диалоговое окно:

 '$("#mydialog").dialog("open"); return false;',)); ?>и мы Вам перезвоним!

Теперь при нажатии на ссылку появляется модальное окно, после ввода данных они передаются в экшен контроллера и отправляются нам на e-mail, и делается редирект на главную страницу.

blog comments powered by Disqus
Наверх