Порой для при манипуляции каких-нибудь действий на сайте требуется вывод сообщений различного рода, например о возникшей ошибке, или удачном выполнении определенного действия пользователем. Данные информационные сообщения отыгрывают весомую роль в деятельности посетителя, так как несут информационную роль когда пользователь выполняет важную информацию. В данном уроке мы рассмотрим как создать сообщения для пользователя с использованием CSS3 и jQuery. Идея заключается в том, что при выполнении определенного действия..

..с верхней части экрана появляется информационный блок. Для начала мы рассмотрим саму разметку HTML, структура достаточно проста, и не должна вызвать никаких осложнений:

Как вы заметили, в демонстрации приводиться несколько разновидностей ошибок, а именно: информационное сообщение, сообщение об ошибке, предупреждение и сообщение об успешном выполнении действия.

Далее мы рассмотрим стилизацию ошибок, а именно выполнение анимированных диагональных полосок, следует заметить, что данный эффект будет доступен только для браузеров Webkit и Mozilla.

Данные сообщения изначально спрятаны, Для этого будет использоваться фиксированное позиционирование (значение absolute используется только для IE6, так как он не поддерживает position:fixed ).

После того как с CSS мы разобрались-приступим к рассмотрению параметров jQuery. Для начала мы определяем массив с типами сообщений:

Следующая функция скрывает сообщение. Сообщения могут иметь высоту, которая будет изменяться динамически. Поэтому высота сообщений вычисляется, чтобы скрывать сообщения корректно.

Функция showMessage вызывается, когда документ готов.

После загрузки мы скрываем все сообщения: hideAllMessages(). Затем для каждого триггера выводим соответствующее сообщение :

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.