Данная статья располагается на двух страницах. Первая часть
Видеоурок к ней
Успешный ответ.
{
"status": 1,
"html": "HTML код приходит сюда ..."
}
HTML свойство содержит код комментария, аналогичные для разметки в шаге 1.
{
"status": 0,
"errors": {
"email": "Пожалуйста, введите адрес электронной почты.",
"body": "Пожалуйста введите текст комментария.",
"name": "Пожалуйста введите имя."
}
}
В случае неудачи, JQuery перебирает ошибки объекта, и выводит ошибки рядом с полями, причины ошибок.
Шаг 3 - CSS
Теперь, когда у нас есть вся разметка, должным образом сгенерированная и отображенная на странице,
мы можем перейти к css.
styles.css – Часть 1
.comment,
#addCommentContainer{
padding:12px;
width:400px;
position:relative;
background-color:#fcfcfc;
border:1px solid white;
color:#888;
margin-bottom:25px;
/* CSS3 закругленные углы и тени */
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow:2px 2px 0 #c2c2c2;
-webkit-box-shadow:2px 2px 0 #c2c2c2;
box-shadow:2px 2px 0 #c2c2c2;
}
.comment .avatar{
/*
/ Аватар позиционируется абсолютно
/*/
height:50px;
left:-70px;
position:absolute;
width:50px;
background:url('img/default_avatar.gif')
no-repeat #fcfcfc;
/* вертикальном положении: */
margin-top:-25px;
top:50%;
-moz-box-shadow:1px 1px 0 #c2c2c2;
-webkit-box-shadow:1px 1px 0 #c2c2c2;
box-shadow:1px 1px 0 #c2c2c2;
}
CSS3 правила применяются, в том числе скругленные углы и тень. Излишне говорить, что они не работают в старых браузерах, но так как они носят чисто презентационный характер,
сценарий все равно будет работать так-что пускай будут.
styles.css - Часть 2
.comment .avatar img{
display:block;
}
.comment .name{
font-size:20px;
padding-bottom:10px;
color:#ccc;
}
.comment .date{
font-size:10px;
padding:6px 0;
position:absolute;
right:15px;
top:10px;
color:#bbb;
}
.comment p,
#addCommentContainer p{
font-size:18px;
line-height:1.5;
}
#addCommentContainer input[type=text],
#addCommentContainer textarea{
/* стили текстовых полей */
display:block;
border:1px solid #ccc;
margin:5px 0 5px;
padding:3px;
font-size:12px;
color:#555;
font-family:Arial, Helvetica, sans-serif;
}
#addCommentContainer textarea{
width:300px;
}
label{
font-size:10px;
}
label span.error{
color:red;
position:relative;
right:-10px;
}
#submit{
/* Кнопка "отправить" */
background-color:#58B9EB;
border:1px solid #40A2D4;
color:#FFFFFF;
cursor:pointer;
font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
font-size:14px;
font-weight:bold;
padding:4px;
margin-top:5px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
}
#submit:hover{
background-color:#80cdf5;
border-color:#52b1e2;
}
Во второй части таблицы стилей, мы дадим стиль комментариям и элементам форм.
Обратите внимание, что input[type=text] , который выбирает элементы в зависимости от типа атрибута.
script.js
$(document).ready(function(){
/* Следующий код выполняется один
/раз после загрузки DOM */
/* Этот рубеж будет препятствовать
/нескольким комментариям подряд: */
var working = false;
$('#addCommentForm').submit(function(e){
e.preventDefault();
if(working) return false;
working = true;
$('#submit').val('Working..');
$('span.error').remove();
/* Отправка формы для Поля submit.php: */
$.post('submit.php',$(this).
serialize(),function(msg){
working = false;
$('#submit').val('Submit');
if(msg.status){
/*
/ Если вставка была успешной,
/ добавить комментарий ниже последней
/ на странице с slideDown эффект
/*/
$(msg.html).hide().
insertAfter('.comment:last').slideDown();
$('#body').val('');
}
else {
$.each(msg.errors,function(k,v){
$('label[for='+k+']').append(
'<span class="error">'+
v+'</span>');
});
}
},'json');
});
});
Начиная сверху, у нас есть $(document).ready(). вызов, который связывает функцию с содержанием DOM загруженного события.
Рабочая переменная выступает как флаг, который сообщает, что сценарий ведёт запрос AJAX (для предотвращении двойного размещения).
В функции обратного вызова для запроса POST AJAX, мы проверяем комментарий. Мы получили разметку на странице после последнего комментарий с slideDown анимации.
Если были проблем, мы показываем, сообщения об ошибках, путем добавления сообщения об ошибках соответствующие элементы.
С помощью этой простой AJAX система комментарии стали изящней и приятней. Урок по комментарием завершен! Спасибо за внимание и пользуйтесь на здоровье :)
Исходники