Блог
Главная » jQuery » Красивая всплывающая панель на jQuery
13:34




Для начала смотрим ДЕМО

Его можно использовать как для отображения рекламы, так и для проведения собственных маркетинговых компаний.

Плагин очень гибок и прост в установке.

Использование плагина:

Прежде всего нам необходимо подключить фреймворк и файл плагина.
Code

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.meerkat.js"></script>


Далее нам необходимо инициализировать основную функцию:
Code

<script type="text/javascript">
$(document).ready(function(){
meerkat();
});
</script>


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

Последним шагом будет вставка Div с необходимым текстом где-либо в документе (лучше всего перед закрывающим тегом ). Обязательно id должно быть meerkat.
Code

<div id="meerkat">
Meerkat Content Goes Here
</div>


Значения по умолчанию данного плагина будут такими:
Code

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".

Категория: jQuery

Вы не авторизованы, по-этому вы не можете скачивать файлы к материалу, просматривать демо, читать и оставлять комментарии!

Knu.com
  • Опросик
  • Зайдете ли вы к нам еще?