Генератор форм

Баннер

Для веб-мастера

Реклама


ProgressBar для формы на jQuery и CSS3

Рейтинг:
Дата: 25 марта 2012 Просмотры 12366 Комментарии 15

Давненько я не писал в блог. Катастрофически не хватает времени. Ну все-таки получилось выделить время и написать интересную статью для Вас.

Итак, сегодня речь пойдет о том, как я в одном из проектов, реализовал, как мне кажется, интересный эффект при отправке AJAX-формы. Стояла задача, при отправке данных с формы ajax-ом на сервер, не дать пользователю изменить данные и не отправить повторно данные, до тех пор, пока не будет получен ответ с сервера. А когда данные будут отправляться, показать пользователя, что данные отправляются. Так мне в голову пришла идея реализовать, своего рода progressbar для формы. Что из этого получилось, смотрите на демо странице.

 

 

Так как данный эффект, был частью одного скрипта, то я решил вынести этот код отдельно, дабы поделиться им с Вами, а чтобы Вам было проще его применить, я оформил весь код в виде плагина на jQuery. Над названием не заморачивался, поэтому назвал свое творение jquery.ajaxformbar.js

Для того, чтобы использовать данный плагин, нам необходима любая форма с данными. Для демонстрации работы плагина, я создал самую обыкновенную форму обратной связи для сайта. Вот ее html-код:

<form action="send.php" method="post" class="form" id="form">
<div>
<label>Ваше имя:</label>
<input type="text" class = "text" name="user_name" value="" />
</div>

<div>
<label>Ваш e-mail адрес:</label>
<input type="text" class = "text" name="user_email" value="" />
</div>

<div>
<label>Тема письма:</label>
<input type="text" class = "text" name="subject" value=""/>
</div>

<div class="area">
<label>Текст сообщения:</label>
<textarea cols="40" class = "textarea" rows="5" name="text"></textarea>
</div>

<div>
<label>&nbsp;</label>
<input type="submit" class="btn" value="Отправить сообщение" />
</div>

</form>

Это самая обыкновенная форма, Вы же можете использовать любую другую.

После того, как форма размещена на странице, необходимо подключить библиотеку jQuery с репозитория Google и сам плагин jquery.ajaxformbar.js к странице с формой. Это делается так:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">
window.jQuery || document.write('<script type="text/javascript" src="js/jquery-1.6.2.min.js"><\/script>');
</script>

<script type="text/javascript" src="js/jquery.ajaxformbar.js"></script>

Теперь необходимо подключить файл со стилями для нашего плагина jquery.ajaxformbar.css. Это делается так:

<link href="styles/jquery.ajaxformbar.css" rel="stylesheet" type="text/css" />

После того, как все необходимые файлы подключены, можно вызывать сам плагин. Это делается так:

$(function(){

$('#form').ajaxformbar({
text: 'Сохраняю...',
type: 'post',
start: 5,
step: 20,
limit: 60,
startSpeed: 200,
endSpeed: 100,
beforeSend: function(jqXHR, settings){ },
success: function(response, textStatus, jqXHR){}

});
});

Данный плагин необходимо вызывать непосредственно к форме. В нашем примере я применяю плагин к форме с идентификатором id='form'. Данный плагин автоматически отправить данные на сервер по адресу указанному в атрибуте action формы. В нашем примере это файл send.php.

Кроме этого плагин имеет ряд параметров, которые можно настроить:

Параметр Значение по умолчанию Описание
text Сохранаяю... текст, который выводится в progressbar
type post тип запроса, который будет отправлен на сервер(post или get)
start 5 начальная позиция progressbar в процентах. Знак процента % указывать не надо
step 20 шаг в процентах, на который будет увеличиваться progressbar с каждой итерацией
limit 40 значение progressbar в процентах, до которого он дойдет, пока не получит ответ от сервера 
startSpeed 200 скорость итераций в миллисекундах перед отправкой запроса на сервер, т.е. время, через которое будет выполняться следующий шаг итерации, до того момента, пока не будет получен ответ с сервера
endSpeed 100 скорость итераций в миллисекундах после отправкой запроса на сервер, т.е. время, через которое будет выполняться следующий шаг итерации, после того момента, когда будет получен ответ с сервера
beforeSend   пользовательская функция, которая будет вызвана, перед отправкой запроса на сервер. Если данная функция вернет значение FALSE, то данные не будут отправлены на сервер. Данная функция отлично подходит для валидации данных и принимает на вход 2 параметра: jqXHR - jQuery XMLHttpRequest, settings - настройки запроса.
success    пользовательская функция, которая будет вызвана в случае успешного завершения запроса. На вход принимает 3 параметра: response – ответ сервера, textStatus - строка со статусом выполнения запроса, jqXHR - jQuery XMLHttpRequest.

 

 

Вот такой вот простой и интересный плагин у меня получился. Надеюсь Вам он понравился и Вы его будете использовать в своих проектах. Жду Ваших отзывов и вопросы в комментариях!

P.S.: http://www.bi-plan.ru - магазин готовых бизнес планов на любой вкус. Каждый сможет подобрать готовую модель бизнеса для себя.
 

Оцените эту статью:



Похожие статьи
Интересно почитать

    Получать новые материалы этого сайта на свой email адрес?

    Отправлять мне комментарии по эл. почте?

Реклама

Баннер

Топ комментаторы

Нашли ошибку в тексте

Система Orphus
https://biznesguide.ru/coding/178.html
4,25 из 5 на основе 16 оценок.
Твиттер Facebook Google plus RSS