Overhang.js - jQuery-плагин для показа выпадающих уведомлений

В настоящее время мы можем создавать ненавязчивые уведомления, которые содержат ту же информацию, но не мешают работе пользователя. И это именно то, что вы можете сделать с overhang.js.

Этот бесплатный jQuery- плагин может добавлять пользовательские панели уведомлений, которые выпадают в верхней части экрана. Они позиционируются с помощью CSS и анимируются с помощью JavaScript, поэтому могут выпасть из фиксированной точки вверху независимо от длины страницы.

Вы можете создавать сообщения, которые автоматически закрываются через определенное время, или требуют действий пользователя для их закрытия.

Сообщения могут показываться в случае успеха, неудачи, ошибки или просто уведомлять посетителя страницы о чем-либо. Панели также могут иметь свои собственные кнопки «да / нет», чтобы задавать пользователям вопросы, на подобие prompt в JavaScript.

С помощью overhang.js вы можете создать выпадающую панель с полем для ввода текста. Использовать это для формы подписки было бы идеально.

Overhang.js поддерживает все основные браузеры, поддерживаемые jQuery, и также поддерживает jQuery UI для функций анимации.

Наряду с библиотеками пользовательского интерфейса jQuery и jQuery UI вам также потребуется включить в плагин пользовательский CSS-файл. Вы всегда можете объединить его с таблицей стилей вашего сайта, чтобы уменьшить количество HTTP-запросов. Каждый вызов метода overhang() может принимать любое количество параметров. Они называются «опциями» и дают вам полный контроль над каждым окном уведомлений.

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

Вот пример кода, демонстрирующий, как создать окно подтверждения:

	// Какое-то уведомление
	$("body").overhang({
	   type: "confirm",
	   yesMessage: "Да, пожалуйста!",
	   noMessage: "Нет, спасибо."
	});
	

Вы можете видеть, что это довольно просто и не требует большого количества кода JQuery.

Чтобы скачать плагин, вы можете посетить репозиторий на GitHub, где вы также можете просматривать исходные файлы напрямую. Если же вы хотите увидеть больше демо-примеров, зайдите на сайт Overhang.js.

Демо-страница overhang.js

Оригинал статьи: Overhang.js – A jQuery Plugin for Dropdown Notification Messages

Автор статьи: Jake Rocheleau

Перевод: Земсков Матвей