Сегодня, мы рассмотрим, как можно сделать прелоадер. Прелоадер будет появляться, при отправке данных из формы. Для работы нам понадобятся: jQuery и собственно, сама картинка прелоадера. Картинку можно взять осюда —
http://preloaders.net/.
Ок, картинку выбрали и даже не забыли, что нужно будет подключить jQuery. Теперь, можно приступать к созданию формы и кода, отвечающего за работу прелоадера. Форма будет простая, с 3 полями: Имя, Почта и Комментарии. Данные из формы будут передаваться в файл ajax.php.
Создаем файл index.php, с таким содержанием:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {
$('#submit').click(function() {
//Добавляем нашу картинку в <div id="container">
$('#container').append('<img src="jquery-preloader.gif" alt=Загрузка..." id="loading" />');
var name = $('#name').val();
var email = $('#email').val();
var comments = $('#comments').val();
//Передаем данные в файл ajax.php
$.ajax({
url: 'ajax.php',
type: 'POST',
data: 'name=' + name + '&email=' + email + '&comments=' + comments,
success: function(result) {
$('#response').remove();
$('#container').append('<p id="response">' + result + '</p>');
$('#loading').fadeOut(500, function() {
$(this).remove();
});
}
});
return false;
});
});
</script>
<style>
label {
display: block;
}
</style>
<form action="" method="post">
<div id="container">
<label for="name">Имя</label>
<input type="text" name="name" id="name" />
<label for="email">Почта</label>
<input type="text" name="email" id="email" />
<label for="comments">Комментарии</label>
<textarea rows="5" cols="30" name="comments" id="comments"></textarea>
<br />
<input type="submit" name="submit" id="submit" value="Отправить" />
</div>
</form>
Давайте разберем более подробно некоторые моменты, относительно работы скрипта. После нажатия кнопки, мы добавляем нашу картинку в див с id=»container». После этого передаем данные в файл ajax.php.
$.ajax({
url: 'ajax.php',
type: 'POST',
data: 'name=' + name + '&email=' + email + '&comments=' + comments,
success: function(result) {
$('#response').remove();
$('#container').append('<p id="response">' + result + '</p>');
$('#loading').fadeOut(500, function() {
$(this).remove();
});
}
});
Ответ, из скрипта ajax.php, возвращается в параграф p c id=»response». После того, как получили данные, применяем к нашей картинке прелоадеру эффект fadeOut и удаляем её.
Создадим файл принимающий данные из формы. Содержимое файла ajax.php будет следующим:
<?php
//Добавляем/извлекаем данные из БД
//Выводим сообщение о том, что комментарий добавлен
echo "Комментарий добавлен";
?>
Думаю, с последним скриптом у вас не должно возникнуть осложнений.