Матвей Земсков

Заметки веб-мастера

Понедельник, 13 июля 2020 17:34

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

Оцените материал
(0 голосов)

Насколько раздражают стандартные окна оповещений JS? Они представляют из себя пережиток примитивной эпохи веб-разработки.

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

overhang.js

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

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

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

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

overhang.js пример использования

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

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

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

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

JavaScript

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

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

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

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

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

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

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

Прочитано 177 раз
Другие материалы в этой категории:
Ленивая (lazy load) загрузка изображений с Progressively

Добавить комментарий


Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

Наверх