ProgressBar для формы на jQuery и CSS3
Давненько я не писал в блог. Катастрофически не хватает времени. Ну все-таки получилось выделить время и написать интересную статью для Вас.
Итак, сегодня речь пойдет о том, как я в одном из проектов, реализовал, как мне кажется, интересный эффект при отправке 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> </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 - магазин готовых бизнес планов на любой вкус. Каждый сможет подобрать готовую модель бизнеса для себя.
-
Комментарии (15)
- Сайт