YiiBootstrap. Форма входа на сайт в модальном окне.
Добавлено: 2013.01.29, 12:29
Рассмотрим создание формы входа на сайт в модальном окне, при использовании дополнения YiiBooster.
YiiBooster - разработка команды CleverTech, сочетающая в себе YiiBootsrap (интерпретация популярного css-фреймворка под Yii) и YiiBoilerplate. Виджет модальных окон TbModal позволяет достаточно просто создавать их на своем сайте.
Предполагается, что форма логина доступна с любой страницы сайта, поэтому добавление кода будем осуществлять в слой main отображения (protected/views/layouts/main.php). Код подключения виджета и создания формы входа:
Теперь необходимо создать ссылку на активацию окна (protected/views/layouts/main.php):
После клика на "Вход" модальное окно с формой входа появится на экране.
В случае, если Вами используется виджет TbNavbar для отображения главного меню сайта (protected/views/layouts/main.php), в котором есть ссылка на страницу входа, немного изменим его:
Вид окна:
YiiBooster - разработка команды CleverTech, сочетающая в себе YiiBootsrap (интерпретация популярного css-фреймворка под Yii) и YiiBoilerplate. Виджет модальных окон TbModal позволяет достаточно просто создавать их на своем сайте.
Предполагается, что форма логина доступна с любой страницы сайта, поэтому добавление кода будем осуществлять в слой main отображения (protected/views/layouts/main.php). Код подключения виджета и создания формы входа:
Код: Выделить всё
<?php
//Подключаем виджет модального окна
$this->beginWidget('bootstrap.widgets.TbModal', array(
'id'=>'loginModalForm',
'htmlOptions'=>array(
'style'=>'display: none;', //скрываем модальное окно в неактивном состоянии, исключая возможное перекрытие с другими элементами страницы
),
));
//модель формы входа и виджет формы
$model = new LoginForm;
$form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(
'id'=>'login-form',
'action'=>$this->createAbsoluteUrl('/site/login'),
'enableAjaxValidation' => true, // активируем ajax-валидацию, при ошибках ввода логина/пароля - ошибка будет отображаться в нашем модальном окне
'enableClientValidation'=>true,
'clientOptions' => array(
'validateOnSubmit' => true,
'validateOnChange' => false,
),
'htmlOptions'=>array(),
));
?>
<!-- заголовок модального окна -->
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4>Вход на сайт</h4>
</div>
<!-- тело модального окна, выводим элементы формы -->
<div class="modal-body">
<?php
//Элементы формы
echo $form->textFieldRow($model, 'username', array('class'=>'span3'));
echo $form->passwordFieldRow($model, 'password', array('class'=>'span3'));
echo $form->checkboxRow($model, 'rememberMe');
?>
</div>
<!-- подвал формы, где выводятся кнопки отправки формы и закрытия модального окна -->
<div class="modal-footer">
<?php
$this->widget('bootstrap.widgets.TbButton', array(
'buttonType'=>'submit',
'label'=>'Вход',
));
?>
<?php
$this->widget('bootstrap.widgets.TbButton', array(
'label'=>'Закрыть',
'htmlOptions'=>array('data-dismiss'=>'modal'),
));
?>
</div>
<?php
$this->endWidget();
$this->endWidget();
?>
Код: Выделить всё
<?php
// проверка, является ли пользователь гостем
if (Yii::app()->user->isGuest) {
echo CHtml::link(
'Вход',
array('site/login'),
array(
'data-toggle'=>'modal',
'data-target'=>'#loginModalForm',
)
);
} else {
echo CHtml::link('Выход', $this->createAbsoluteUrl('/site/logout'));
}
?>
В случае, если Вами используется виджет TbNavbar для отображения главного меню сайта (protected/views/layouts/main.php), в котором есть ссылка на страницу входа, немного изменим его:
Код: Выделить всё
<?php
// Главное меню
$this->widget('bootstrap.widgets.TbNavbar', array(
'brand' => 'Title',
'fixed' => 'top',
'collapse'=>true,
'items' => array(
array(
'class' => 'bootstrap.widgets.TbMenu',
'items' => array(
array('label'=>'Home', 'url'=>array('/site/index')),
array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')),
array('label'=>'Contact', 'url'=>array('/site/contact')),
//изменяем элемент массива 'url' и добавляем 'itemOptions'=>array('data-toggle'=>'modal', 'data-target'=>'#loginModalForm')
array('label'=>'Login', 'url'=>'#', 'visible'=>Yii::app()->user->isGuest, 'itemOptions'=>array('data-toggle'=>'modal', 'data-target'=>'#loginModalForm')),
array('label'=>'Logout ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest),
)
),
)
));
?>