Все для DataLife Engine / DLE хаки / Хак для DLE / Скользящая панель - Portamento хак дле

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



Оригинальная скользящая панель - Portamento хак дле, вы сможете познакомиться сегодня на dle9.com, где основное функционирование завязана на использовании Jquery плагина Portamento. Сам плагин написан программистом из Лондона Крисом Нобелем, главная особенность - это динамически передвигающийся по мере прокрутки слой с вашим содержимым.

Если вы еще не поняли о чем идет речь - демо на сайте автора.

Скользящая панель - Portamento удобна для показа рекламного блока новостей, а также меню сайта DataLife Engine, главным образом потому, что он всегда перед глазами.

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

1. Скачиваем архив с официального сайта
2. Раскладываем содержимое по папкам

portamento.js (или portamento-min.js) -> templates/YOURTEMPLATE/js/


3. Открываем main.tpl, в head вставляем

<script src="/templates/Default/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 - отключает использование обходного способа для старых браузеров. Панель будет выводиться, но не будет скользить при прокручивании страницы.

Автор: Dmitry Dark5ider
Скачать у нас хаки для dle, и другие модули для dle
На этом все. Удачной работы! Будут вопросы - пишите.

Hak-DLE-portamento.zip [48,82 Kb] (cкачиваний: 90)
  • 60
Добавить комментарий

Оставить комментарий

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent