BBCode выдвижной панели (для информации)представляю вашему вниманию ещё один интересный вариант применения вывода дополнительной информации: скрытая с правой стороны панелька при клике выдвигается и показывает написанную там информацию. что-то типа пояснений к тексту или добавочная информация по тексту/автору. скрипт реализован на JQuery,
оформление (css) прописано прямо в bbcode в админке.
как это выглядит после применения - можете поглядеть
справа на этой страничке.
Как эта интересность ставится:
Скачать из архива сайта скрипты и картинку, распаковать и папку
panel загрузить в корень форума (где файл config.php).
скачать из архива сайтаИспользование BBCodeЗамена 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: 'https://belk.info/phpbb/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так как всё, что я выкладываю - это конструкторы, вдруг вы захотите что-то изменить "под себя"
и зачем это надо?
всё. надеюсь кому-нибудь пригодится.
к сожалению этот скрипт я нашёл уже давно где-то на просторах сети. если объявится автор, я с удовольствием пропишу копирайт
Обязательно такой поставлю! 
