WOAHBar - jQuery скрипт всплывающей информационной панели

08 сентября 2013  24127  скрипты, маркетинг, jQuery

 

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

WOAHBar — это бесплатная альтернатива многофункционального скрипта HelloBar.

1. Подключаем библиотеки jQuery, jQuery UI, функцию скрипта WOAHBar и стили CSS.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>

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

<link rel="stylesheet" type="text/css" href="woahbar.css" />

Cкрипт WOAHBar был улучшен (Mark Dixon) — добавлена поддержка cookies. После того как посетители сворачивают WOAHbar, он остается закрытым, пока они не решат его открыть снова или не наступает окончание срока cookies.

2. Загружаем на сайт изображения woahbar-up-arrow.png, woahbar-up-arrow-hover.png и woahbar-down-arrow.png и не забываем прописать их месторасположение в коде.

3. Вставляем код.

<div class="woahbar" style="display:none">
<span>Какой-то информационный текст <a class="woahbar-link" href="ссылка">Текст ссылки</a></span>
<a title="скрыть панель" class="close-notify" onclick="woahbar_hide();"<img class="woahbar-up-arrow" src="woahbar-up-arrow.png"></a>
</div>
<div class="woahbar-stub" style="display:none">
<a title="открыть панель" class="show-notify" onclick="woahbar_show();"><img class="woahbar-down-arrow" src="woahbar-down-arrow.png"></a>
</div>

 

Скачать исходники

 

Комментарии для сайта Cackle
наверх