info navigation

phpbb-belk.ru

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



Новая тема  [ Сообщений: 2 ]  Просмотры: 851

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

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


Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

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


BBCode выдвижной панели (для информации)

представляю вашему вниманию ещё один интересный вариант применения вывода дополнительной информации: скрытая с правой стороны панелька при клике выдвигается и показывает написанную там информацию. что-то типа пояснений к тексту или добавочная информация по тексту/автору. скрипт реализован на JQuery,
оформление (css) прописано прямо в bbcode в админке.

как это выглядит после применения - можете поглядеть справа на этой страничке.

Как эта интересность ставится:

Скачать из архива сайта скрипты и картинку, распаковать и папку panel загрузить в корень форума (где файл config.php).

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

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

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

[info]{TEXT}[/info]


Замена HTML

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

<script type="text/javascript" src="./panel/jquery.js"></script>
<script src="./panel/jquery.tabslideout.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
   $('.panel').tabSlideOut({
      tabHandle: '.handle',
      pathToTabImage: 'ваш сайт/panel/tr.png',
      imageHeight: '30px',
      imageWidth: '30px',
      tabLocation: 'right',
      speed: 300,
      action: 'click',
      topPos: '35%',
      fixedPosition: true
   });
});
</script>
<style>
.panel {height:300px;width:250px;background:#fff;border:1px solid #c1c1c1;border-radius:5px;}
.sp {padding:20px}
</style>
<div class="panel">
<div class="sp">
   <a class="handle" href="#"></a><span>{TEXT}</span>
</div>
</div>


Подсказка

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

скрытая информация по клику (справа): [info]текст[/info]


теперь небольшое пояснение по коду в Замена HTML:

во-первых, для вывода картинки в скрипте лучше прописать абсолютную ссылку, то есть в строке

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

pathToTabImage: 'ваш сайт/panel/tr.png',


прописать полный путь до картинки. например здесь он такой:

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

pathToTabImage: 'https://phpbb-belk.ru/panel/tr.png',


во-вторых, оформление панельки - это

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

.panel {height:300px;width:250px;background:#fff;border:1px solid #c1c1c1;}
.sp {padding:20px}


небольшие пояснения от автора скрипта по jquery

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

   $('.panel').tabSlideOut({                     //Класс панели
      tabHandle: '.handle',                  //Класс кнопки
      pathToTabImage: 'tr_right.png',            //Путь к изображению кнопки
      imageHeight: '30px',                  //Высота кнопки
      imageWidth: '30px',                  //Ширина кнопки
      tabLocation: 'left',                  //Расположение панели top - выдвигается сверху, right - выдвигается справа, bottom - выдвигается снизу, left - выдвигается слева
      speed: 300,                        //Скорость анимации
      action: 'click',                        //Метод показа click - выдвигается по клику на кнопку, hover - выдвигается при наведении курсора
      topPos: '35%',                     //Отступ сверху
      fixedPosition: false                  //Позиционирование блока false - position: absolute, true - position: fixed


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



и зачем это надо?

Изображение


всё. надеюсь кому-нибудь пригодится.
к сожалению этот скрипт я нашёл уже давно где-то на просторах сети. если объявится автор, я с удовольствием пропишу копирайт


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
bbcode,phpbb 3.0,forum,info
Не в сети
(Дмитрий)  
2018-10-06 
Аватара пользователя

Стаж: 7 лет 5 месяцев
Сообщения: 734


Стиль: prosilver


Репутация: 15




Тиц и PR

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


Супер bb код! Спасибо, Андрей! :arigato: Обязательно такой поставлю! :idea:


Показать сообщения за:  Поле сортировки  
Ответить на тему  [ Сообщений: 2 ] 

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

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

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

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



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

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




cron

Текущее время: 14 июн 2024, 07:10

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

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