info navigation

phpbb-belk.ru

темы, связанные с форумом phpbb 3.0.x



Новая тема  [ 1 сообщение ]  Просмотры: 769

Автор Сообщение
Не в сети
(Андрей)  
Администратор
Аватара пользователя

Стаж: 8 лет 6 месяцев 28 дней
Сообщения: 1223
Откуда: здешние мы


Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


Скрипт блока выдвижной панели

Данный блок интересен тем, что в настройках скрипта возможно довольно много изменений. Скрипт позволяет менять положение выдвижного блока (сверху-слева-снизу-справа), размеры самого блока, размеры блока инициации (кнопка выдвижения блока),
выбор инициации - по клику или при наведении, скорость открытия.
Сам скрипт довольно простой.

посмотреть демо

Ставится на сайт это украшение достаточно просто.

В корень сайта закачивается папка с двумя скриптами и картинкой panel

Скачать из файлового архива сайта

Открыть файл "шапки" (overall_header.html либо иной, используемый у вас)
Найти



Вставить перед найденным

Код: Выделить всё

<script type="text/javascript" src="panel/jquery.js"></script>
<script src="panel/jquery.tabslideout.js" type="text/javascript"></script>
<style type="text/css">
.panel {
   height:138px;
   width: 250px;
   background: #FFFFFF;
        border: 1px solis #1C1C1;     
   color:#000000;
}
.sp {padding:20px}
</style>
<script type="text/javascript">
$(function(){
   $('.panel').tabSlideOut({   //Класс панели                 
      tabHandle: '.handle',      //Класс кнопки       
      pathToTabImage: 'ваш сайт/panel/tr_right.png',    //Путь к изображению кнопки         
      imageHeight: '30px',         //Высота кнопки           
      imageWidth: '30px',    //Ширина кнопки               
      tabLocation: 'left',    //Расположение панели top , right, bottom, left                 
      speed: 300,         //Скорость анимации                 
      action: 'click',      //Метод показа click, hover  (при клике, наведении)               
      topPos: '35%',      //Отступ сверху                 
      fixedPosition: true   //false - position: absolute, true - position: fixed  (true - position: fixed - закрепляет в одном месте экрана и стоит на месте при прокрутке страницы)
   });
});
</script>


Небольшое объяснение
Стиль блока можно вывести и отдельно в ваш .css файл стиля.

Код: Выделить всё

.panel {
   height:138px;
   width: 250px;
   background: #FFFFFF;
        border: 1px solis #1C1C1;     
   color:#000000;
}
.sp {padding:20px}

Описание функций скрипта, например вот это //Отступ сверху, на некоторых сайтах будет мешать работе скрипта и его стоит удалить. (бывает нечасто, но бывает)

если у вас уже подключена библиотека jquery, то этот скрипт прописывать не надо:

Код: Выделить всё

<script type="text/javascript" src="panel/jquery.js"></script>


Добавить после <body>

Код: Выделить всё

<div class="panel">
<div class="sp">
   <a class="handle" href="#"></a>

   <span>
      это типа потайной карман<br /><br />
      может для чего сгодится<br /><br />
      ла-ла<br /><br />
      ла-ла-ла?
   </span>
</div>
</div>

Где

Код: Выделить всё

<a class="handle" href="#"></a>

это вывод картинки открытия, а сама ваша информация размещается между тэгами

Код: Выделить всё

<span></span>



Вроде бы всё. Успехов в установке. Кнопочку открытия можете нарисовать свою под стиль сайта. (не забудьте только прописать и её размеры в скрипте).


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
avascript,block,panel
Показать сообщения за:  Поле сортировки  
Ответить на тему  [ 1 сообщение ] 

Кто сейчас на сайте:

Всего посетителей: 0, из них зарегистрированных: 0, скрытых: 0 и гостей: 0 (основано на активности пользователей за последние 5 минут)
Больше всего посетителей (122) здесь было 19 дек 2023, 12:10

Сейчас этот раздел просматривают: нет зарегистрированных пользователей и гости: 0

Часовой пояс: UTC + 2 часа



Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения
Вы можете защищать свои темы паролем

Найти:
Перейти:  




cron

Текущее время: 20 апр 2024, 00:09

Создано на основе phpBB® Forum Software © phpBB Group
Яндекс.Метрика

Полная версия Мобильный вид