Сегодня не возможно представить онлайн-формы без ajax-сабмита.
Если раньше при сабмите формы страница перегружалась, и пользователь просто не мог дважды нажать на кнопку отправить, то теперь, если не закрыть доступ, то вызовется несколько ajax-запросов и соответственно засабмитится сразу несколько одинаковых форм. Можно конечно просто закрыть доступ для отправки формы, пока не выполнится запрос, но для пользователя понятнее и интереснее будет, если страница как-то покажет ему, что запрос обрабатывается, и пока ничего сделать нельзя (подумайте о людях с EDGE USB-модемами или вообще с Dial-up, они будут действительно долго ждать пока отправится ajax-запрос.
Не будем останавливать на отправки ajax запросов и обработке, попробуем сделать так, чтобы вместо кнопки «Отправить» появлялась анимированная кнопка отправить с бегущей полосой ожидания, до тех пор пока не выполнится запрос (при этом мы не будем использовать GIF, PNGa или Flash, только Jquery, CSS и капельку HTML).
function anima(){ if(!done) $('.a').animate({backgroundPosition:"-141px 0px"},1).delay(150).animate({backgroundPosition:"-281px 0px"},1,function(){ $('.a').delay(150).animate({backgroundPosition:"0px 0px"},1,function(){ anima(); }); })
} var done=false; $(function(){ anima(); $('.a').click(function(){ done!=done; }) })
Для того, чтобы сдеаль кнопку нам понадобится картинка, на подобие той, которую мы обычно делаем, для реализации метода Sliding Doors, такая, чтобы изображение кнопки повторялось несколько раз, и каждая из копий картинки будет отдельным кадром нашей анимации. У меня получилась такая вот картинка:
Теперь опишем CSS:
.a{
height: 26px;
width: 127px;
background: url('http://htmler.ru/wp-content/uploads/2011/02/telemart_comment_submit_anim.png') no-repeat 0px 0px;
}
Предположим, что блок с анимацией будет иметь ClassName=a.
А теперь опишем функцию, которая будет анимировать нашу кнопку-загрузчик:
function anima(){
if(!done)
$('.a').animate({backgroundPosition:"-141px 0px"},1).delay(150).animate({backgroundPosition:"-281px 0px"},1,function(){
$('.a').delay(150).animate({backgroundPosition:"0px 0px"},1,function(){
anima();
});
})
}
Поясню: до тех пор пока переменная done==false рекурсивно сменяем положение бэкграунда для анимированного блока, всего и делов.
Теперь нужно все это дело привязать к отправке формы. Напишем обработчик на JQuery:
$('form').submit(function(e){
e.preventDefault();//отменяем действие формы по умолчанию
done=false;
$('input.submit').fadeOut();
$('.a').fadeIn();
anima();
$.ajax({
url: "submit.php",
success: function()
{
done=true;
$('input.submit').fadeIn();
$('.a').fadeOut();
}
})
})
Вот и все. Теперь по сабмиту формы кнопка «Отправить» исчезнет, вместо нее появится анимированный блок, который будет анимироваться до тех пор, пока ajax запрос не завершиться успешно, после чего кнопка «Отправить» снова появится, а анимированный блок перестанет анимироваться и исчезнет.
Кто не верит, смотрите:
Demo
Примечание
Если вы использует не самую новую версию Jquery, то у вас нет функции delay(), поэтому следует заменить ее везде, где она вызывается в статье на что-то другое, убивающее время, например, на
.animate({fontSize:0},150)
Примечание (еще одно)
В своём примере скорость анимации определяется задержками в паказе «кадров» анимации, и для моей картинки эти задержки равны 150мс, но для других картинок все может быть по-другому, нужно подбирать по вкусу.