[Ликбез] |
Форма входа |
Меню сайта |
Categories | ||
|
Главная » Статьи » Web-программирование » Java Script |
По большому счёту, тема обсосана со всех, с каких только можно, сторон, однако до сих пор возникают вопросы. Некоторые из них хочу рассмотреть более подробно и с примерами. Вся операция "Внедрение своих BB-кодов на сайт” сводится к простой последовательности простых действий.
Добавление самой кнопки новых BB-кодовИтак, кнопка представляет собой, в простейшем варианте, простой инпут (<input />), или картинку с прописанным к ней событием onclick(); Вот её примерный (стандартный) код. Для кнопки: Code (HTML) <span style="padding-right:1px;"> Где: <span /> - для визуального разделения кнопок между собой. Для картинки: Code (HTML) <span style="padding-right:1px;"> Где: class="codeButtImg" - класс для оформления картинки через CSS - не обязательный параметр. Кнопочки, как и отмечено выше, вставляются в шаблон, после оператора $BBCODES$, через условие, проверяющее, разрешены ли BB-коды вообще. Вот так: Установка скрипта обработчика при добавлении BB-кодовДля форума, на котором по умолчанию уже присутствует данный скрипт, устанавливать дополнительные скрипты для добавления BB-кодов не требуется. Но, если «вдруг», то вот ссылка на него: bbcodes.js Подключается он как и обычно, ссылкой на файл: Code (HTML) <script type="text/javascript" src="http://src.ucoz.net/src/bbcodes.js"></script> Установка скрипта обработчика BB-кодов в материалах/постахСам скрипт обработчик - считывает контент блока с текстом (комментарием, постом) и ищет в нём определённые, заранее заданные в скрипте BB-коды, а найдя их - заменяет на их HTML-эквивалент, котрый тоже задаётся в самом скрипте. Ниже - будут конкретные примеры, а пока - вот стандартный скрипт обработчика: Скрипт с использованием библиотеки jQuery: Code (JavaScript) <script type="text/javascript"> Скрипт обработчика BB-кодов на чистом JavaScript: Code (JavaScript) <script type="text/javascript"> Где: ('[bbcode]') - стартовый BB-код. ('bbcode') - его стартовое HTML представление (если не понятно - ниже будет пример). ('[/bbcode]') - закрывающий BB-код. ('/bbcode') - закрывающая часть HTML представления этого BB-кода. Скрипт обработчик вставляется в шаблон страницы после контента, подверженного обработке. То есть, если контент на форуме (имеются в виду сайты в системе uCoz) выводится оператором $BODY$, то скрипт добавляется в шаблон «Общий вид страниц форума», после $BODY$. И тоже, через условие, проверяющее является ли страница страницей с постами, то есть равняется ли оператор $PAGE_ID$ данной страницы значению «threadpage». В принципе - это всё. А вот теперь, предлагаю рассмотреть конкретный пример. Допустим, хотим сделать блок «Инфо», оформленный фоновым цветом, бордером и картинкой-иконкой, и чтобы вставлялся он BB-кодами [info] и [/info]. Поправим нашу кнопку - проставим выбранные BB-коды: Code (HTML) <span style="padding-right:1px;"><input type="button" class="codeButtons" onclick="simpletag('info','','','message','');return false;" value="info" id="info" title="Блок «info»"></span> Вот примерный HTML код подобного блока: Code (HTML) <fieldset style="margin:7px 5px 7px 30px;padding:3px 10px 7px 25px;border:1px dashed #F36;border-left:2px solid #F00;background:#fafafa url(http://likbezz.ru/_theme/_st/img/ico/alert_ico.gif) no-repeat 4px 7px;"><legend style="color:#C00">Информация:</legend> В принципе, можно, задать блоку класс, и прописать его в CSS. Но, суть не в этом. Разделим этот блок (код блока), на начало блока, его содержание, и конец. Получается вот так: Code (HTML) <fieldset style="margin:7px 5px 7px 30px;padding:3px 10px 7px 25px;border:1px dashed #F36;border-left:2px solid #F00;background:#fafafa url(http://likbezz.ru/_theme/_st/img/ico/alert_ico.gif) no-repeat 4px 7px;"><legend style="color:#C00">Информация:</legend> Где: <fieldset style="..."><legend style="...">Информация:</legend> - это начало блока. Здесь будет текст - это содержание, что вы будете добавлять через форму. </fieldset> - это - конец блока - закрывающий его див. Отредактируем наш скрипт-обработчик - заменим BB-коды на свои, и их HTML-представление. Вот так: Code (JavaScript) <script type="text/javascript"> Внимательно посмотрите, и постарайтесь понять куда что подставляется. В итоге, блок с инфой должен выглядеть примерно вот так: И вот так, при добавлении: Само собой, стилевое оформление блока вы можете менять как хотите, добавлять картинки, фоновые изображения, рамки, границы прочее, и блоков можете сделать не один, а несколько, в разумных пределах, конечно.
Вопросы по теме обсуждаются на форуме «Вопрос по теме ... » в теме «Как сделать свои BB-коды для сайта / форума - обсуждения». Источник: Внедрение своих BB-кодов на сайт, подробная инструкция с примерами, Добавление новых кнопок BBCODES | |
Всего комментариев: 29 | 1 2 » | |||||||||||||||
| ||||||||||||||||
1-10 11-17 | ||||||||||||||||