ProgressBar для форми на jQuery та CSS3
Давненько я не писав у блог. Катастрофічно не вистачає часу. Ну все-таки вдалося виділити час і написати цікаву статтю для Вас.
Отже, сьогодні йтиметься про те, як я в одному з проектів, реалізував, як мені здається, цікавий ефект при відправціAJAX-форми. Стояло завдання при відправленні даних з форми ajax-ом на сервер, не дати користувачеві змінити дані і не відправити повторно дані, доки не буде отримано відповідь з сервера. А коли дані будуть надсилатися, показати користувача, що дані надсилаються. Так мені на думку прийшла ідея реалізувати, свого роду прогрес bar для форми. Що з цього вийшло дивіться на демо сторінці.
Так як цей ефект був частиною одного скрипта, то я вирішив винести цей код окремо, щоб поділитися ним з Вами, а щоб Вам було простіше його застосувати, я оформив весь код у вигляді плагіну на jQuery. Над назвою не морочився, тому назвав свій витвірjquery.ajaxformbar.j s
Це звичайнісінька форма, Ви можете використовувати будь-яку іншу.
Після того, як форму розміщено на сторінці, необхідно підключити бібліотеку jQuery з репозиторію Google і сам плагін jquery.ajaxformbar.js до сторінки з формою. Це робиться так:
Тепер потрібно підключити файл зі стилями для нашого плагіну jquery.ajaxformbar.css. Це робиться так:
Після того, як всі необхідні файли підключені, можна викликати саму плагін. Це робиться так:
Крім цього, плагін має ряд параметрів, які можна налаштувати: