MessageBar (аналог GC Message Bar)

// Март 14th, 2014 // CSS, HTML, JavaScript

MessageBar

MessageBar — простой в установке скрипт для отображения информационного блока с сообщением для пользователя.

Данный скрипт повторяет GC Message Bar (WordPress), с небольшим различием:

  1. MessageBar может быть установлен на любой сайт, вне зависимости от используемой CMS(да и вовсе не важно её наличие).
  2. MessageBar настраивается через переменные в файле messagebar.js и имеет меньший набор настроек(выведен базовый набор, без излишеств), в отличии от GC Message Bar.

Для работы скрипта нам нужна подключенная библиотека jQuery, если она у Вас на сайте не используется, то внутри <head>..</head> подключаем:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Там же подключаем наш скрипт:

<script type="text/javascript" src="messagebar.js"></script>

Сразу после <body> размещаем разметку:

<div id="messagebar" class="firstgrad">
	<div class="container">
		<div class="msg">Скорая техническая помощь в Минске</div>
		<a class="link secondgrad" href="http://belfast.by" target="_blank">Ознакомиться</a>
		<div class="hidebtn"><span>&nbsp</span></div>
	</div>
</div>
<div class="showbtn firstgrad"><span>&nbsp</span></div>

Настройки, расположенные в messagebar.js, прокомментированы для удобства:

  • Градиент всей области
  • Градиент кнопки-ссылки
  • Градиент кнопки-ссылки при наведении
  • Цвет текста
  • Цвет ссылки
  • Убрать кнопку-скрытия, значения: true, false
  • Расположение бара, значения: up, down
  • Высота бара в пикселях

Подключение завершено. Приятного пользования.

Комментировать

, чтобы оставлять комментарии

Авторизация

Регистрация | Забыли пароль?