Portamento : cкользящая панель
Хочу познакомить вас с таким Jquery плагином как Portamento. Плагин представляет собой динамически передвигающийся, по мере прокрутки, слой с вашим содержимым. Это удобно для показа, например рекламного блока или меню сайта так, как они всегда перед глазами.
Установка:
1. Скачать архив с официального сайта или у нас:
2. Скопировать содержимое архива, а именно portamento.js / portamento-min.js в папку templates/ваш_шаблон/js/
3. Открыть шаблон main.tpl и в блок head добавить:
<script src="{THEME}/js/portamento.js"></script>
4. Добавить CSS стили:
Portamento оборачивает панель в элемент с ID = portamento_container. #portamento_container - обеспечивает правильное положение панели, устанавливая ей свойство position:absolute. Панель получает класс fixed, когда она скользит. Поэтому для нее надо установить свойство position:fixed.
Приведу пример:
#portamento_container {
float:right;
position:relative;
}
#portamento_container #example {
float:none;
position:absolute;
}
#portamento_container #example.fixed {
position:fixed;
}
5. Настроить панель:
Для начала нам нужно понять в каких пределах будет "ездить" наш слой / панель. Приведу пример:
Для такой разметки, чтобы слой #r-slide ездил внутри слоя #right-side следует в main.tpl добавить код:
<script>
$('#r-slide').portamento({wrapper: $('#right-side'), gap: 10});
</script>
Так же Portamento можно настроить за счет входных данных:
wrapper - элемент, который ограничивает пермещение боковой панели. Боковая панель не может выйти за его границы. По умолчанию используется элемент.
gap - количество пикселов между верхней границе области обзора и боковой панелью. По умолчанию имеет значение 10.
disableWorkaround - отключает использование обходного способа для старых браузеров. Панель будет выводиться, но не будет скользить при прокручивании страницы.
Посетители, находящиеся в группе Гость, не могут оставлять комментарии к данной публикации.