Portamento - Скользящая панель
9-04-2013, 22:17
0
  DLE Хаки / Блоки

Portamento - Скользящая панель

Хочу познакомить вас с таким Jquery плагином как Portamento.
Плагин написан Лондонским программистом Крисом Нобелем и представляет собой динамически передвигающийся по мере прокрутки слой с вашим содержимым.

Portamento удобен для показа как рекламного блока так и меню сайта, так как он всегда перед глазами.

Установка на DLE проста и выполняется за пару шагов:

1. Скачиваем архив

2. Раскладываем содержимое по папкам

portamento.js (или portamento-min.js) -> templates/YOURTEMPLATE/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. Настроить панель.

Для начала нам нужно понять в каких пределах будет "ездить" наш слой (панель).

Приведу пример:

Portamento - Скользящая панель


Для такой разметки, чтобы слой #r-slide ездил внутри слоя #right-side

в main.tpl вставляем код

<script>
     $('#r-slide').portamento({wrapper: $('#right-side'), gap: 10});
</script>


ОК!

Portamento можно настроить за счет входных данных:

wrapper - элемент, который ограничивает пермещение боковой панели. Боковая панель не может выйти за его границы. По умолчанию используется элемент .

gap - количество пикселов между верхней границе области обзора и боковой панелью. По умолчанию имеет значение 10.

disableWorkaround - отключает использование обходного способа для старых браузеров. Панель будет выводиться, но не будет скользить при прокручивании страницы.

Удачной работы!

Комментарии

Никто еще не оставил комментариев – станьте первым!

Напишите своё мнение