В сегодняшнем уроке мы рассмотрим интересный jQuery плагин по созданию всплывающих окон (блоков).
Его можно использовать как для отображения рекламы, так и для проведения собственных маркетинговых компаний.
Плагин очень гибок и прост в установке.
Использование плагина
Прежде всего нам необходимо подключить фреймворк и файл плагина.
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.meerkat.js"></script>
Далее нам необходимо инициализировать основную функцию:
<script type="text/javascript">
$(document).ready(function(){
meerkat();
});
</script>
В данном примере мы не задаем каких-либо дополнительных настроек, поэтому они будут взяты по умолчанию.
Последним шагом будет вставка Div с необходимым текстом где-либо в документе (лучше всего перед закрывающим тегом </body>). Обязательно id должно быть meerkat.
<div id="meerkat">
Meerkat Content Goes Here
</div>
Значения по умолчанию данного плагина будут такими:
meerkat({
showMeerkatOnLoad: 'false',
close: 'none',
dontShow: 'none',
dontShowExpire: 0,
removeCookie: 'none',
meerkatPosition: 'bottom',
animation: 'slide',
animationSpeed: 'slow',
height: 'auto',
background: 'none'
});
Подробнее об опциях плагина:
showMeerkatOnLoad - принимает два значения: true или false. Когда true, плагин будет показываться при вызове функции (при загрузке страницы). Когда false, плагин будет работать только при нажатии на кнопку.
По умолчанию - "false"
close - данная опция принимает любой селектор (к примеру, ".close" или "#close"). Когда пользователь нажимает на селектор, указанный в опциях, плагин будет закрыт.
По умолчанию - "none"
dontShow - данная опция принимает любой селектор (к примеру, ".dont-show" или "#dont-show"). Когда пользователь нажимает на селектор, указанный в опциях, плагин будет закрыт и не будет показан до перезагрузки браузера или до истечения определенного количества дней (зависит от dontShowExpire)
По умолчанию - "none"
dontShowExpire - если Вы задаете эту опцию, у Вас есть возможность определить длительность периода "не отображения" данного плагина. Значение может быть в интервале от 0 до 365. Кроме этого можно указать 0.5 (плагин не будет показываться 12 часов). Если укажите 3, тогда не будет работать 3 дня.
По умолчанию - "0"
removeCookie - используется для удаления Cookie, которое создается опцией dontShow. Опция removeCookie принимает любой селектор (к примеру, ".remove-cookie" или "#remove-cookie").
По умолчанию - "none"
meerkatPosition - принимает два значения top или bottom (верх или низ). Тут, я думаю, все понятно.
По умолчанию - "bottom"
animation - 2 значение - slide или fade. Можно варьировать разные типы анимации показа\скрытия плагина.
По умолчанию - "slide"
animationSpeed - скорость анимации. Принимает три значения ("slow", "normal", или "fast") или кол-во милисекунд для анимации (например, 1000).
По умолчанию - "slow"
height - возможно указать высоту блока с помощью всех возможных единиц измерения CSS (px, em, %, auto, и т.д.).
По умолчанию - "auto"
background - можно задать фоновый цвет или изображение. Пример: background: '#000 url(/path/to/bgimage.jpg) no-repeat left top'
По умолчанию - "none".