Небольшой "эксперимент" - окно помощи по bbcodeВыглядеть сие чудо должно вот так:
Если посмотреть в корень, то эта тема - продолжение
этой (полоска bbcode как здесь).
При обсуждении всплыл вопрос переделки стандартного FAQ BBCode, то есть файла помощи по применению...
Спустя какое-то время у меня сформировалась идея, как можно реализовать окно помощи в основном окне создания темы, при этом не мешая никаким работам при её создании.
И, как обычно, эта доработка - конструктор. Можете сами переделать её под свои нужды.
Хотя в данном виде она являет собой полностью законченный вариант помощи по стандартным bbcode.
Итак, основные характеристики:
- Модуль объясняет применение стандартных bbcode
- Окно модуля помощи жёстко фиксировано к нижней части экрана и расположено "поверх всего" на странице, что позволяет работать с созданием темы и применением bbcode, смайликов и т.д. не закрывая окно помощи. Страница "прокручивается" под ним.
- Модуль легко перенастраивается под другие bbcode.
- Модуль универсальный, то есть один и тот же файл для обоих стилей.
- Всё "оформление" модуля (скрипты и css) прописано в самом файле и с лёгкостью может быть установлено на любой чистый форум.
- В самом модуле в верху есть информационная надпись-ссылка, которая ведёт на стандартный файл помощи по bbcode.
- Модуль открывается по кнопке "помощь" (но вы можете прописать открытие как вам удобнее), закрыть модуль можно либо по той же ссылке, либо в самом модуле.
- Стиль оформления блока сделан по стилю этого сайта.
- Файл создан сразу на русском языке в кодировке UTF8 без BOM. Языковых переменных нет.
Вроде всё....
Да, я поставил этот модуль и сюда.
FAQ BBCode. Зарегестрированные пользователи могут понаблюдать "в живую".
Ладно, со вступлением, вроде, закончил, теперь сама доработка:
Скачать файлик из файлового архива сайта:
Скачать из файлового архива сайтаРаспаковать и загрузить файл
bbcode_info.html в папку
template вашего стиля.
Теперь небольшие правки-подключения:
для стилей на основе prosilver
Открыть
posting_editor.htmlНайти
Код: Выделить всё
<div id="message-box">
<textarea <!-- IF S_UCP_ACTION and not S_PRIVMSGS and not S_EDIT_DRAFT -->name="signature" id="signature" style="height: 9em;"<!-- ELSE -->name="message" id="message"<!-- ENDIF --> rows="15" cols="76" tabindex="4" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onfocus="initInsertions();" class="inputbox">{MESSAGE}{DRAFT_MESSAGE}{SIGNATURE}</textarea>
</div>Вставить после найденного
Код: Выделить всё
<ul class="nav-main"><li><a href="#" onclick="openbox('block9999'); return false" class="button button-blue">Помощь по кнопкам</a></li></ul>//если у вас уже прописана "помощь по кнопкам" из полоски - просто замените ту строчку, что есть - на новую.
В самый конец файла
posting_editor.html добавить
для стилей на основе subsilver2
Открыть
posting_body.htmlНайти
Код: Выделить всё
<td valign="top" style="width: 100%;"><textarea name="message" rows="15" cols="76" tabindex="3" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onfocus="initInsertions();" style="width: 700px; height: 270px; min-width: 98%; max-width: 98%;">{MESSAGE}</textarea></td>Вставить после найденного
Код: Выделить всё
<ul class="nav-main" style="margin-top:2px;"><li><a class="button button-blue" onclick="openbox('block9999'); return false" href="#">помощь по кнопкам</a></li></ul>//если у вас уже прописан данный код от "полоски" - просто замените тот код, что у вас - на этот.
В самый конец файла
posting_body.htmlДобавить следующий код
пояснения по коду
Код: Выделить всё
#block9999 {width:800px;height:300px;border:2px solid #4477a1;padding:5px;position:fixed;z-index:100;bottom:10px;left:0;right:0px;margin: auto;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);box-shadow:0 0 20px rgba(0,0,0,0.8);background-color: #cadceb;}это основной блок инфоокна.
width:800px;height:300px; - размеры блока
position:fixed;z-index:100;bottom:10px;left:0;right:0px; - размещение блока относительно места на экране
webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);box-shadow:0 0 20px rgba(0,0,0,0.8); - тень блока
это оформление кнопок. можете, меняя класс и стили, сделать свои.
Код: Выделить всё
.info_content {font-family: "Verdana", Arial, Helvetica, sans-serif;color: #000000;text-shadow: #fff 1px 1px 0;padding:5px 10px;background:#ececec;height:230px;width:780px;}это основной бок вывода информации по запросу (серенький).
height:230px;width:780px; - размеры блока.
лучше прописывать жёстко, так как бывает, что блок "обрабатывается" как table и серый фон не растягивается на всю длину/ширину блока.
если вы захотите изменить размеры блока, учитывайте, что менять необходимо в обоих блоках, описанных выше, соответственно (чтобы не поплыло).
блок сделал с жёстко заданными размерами, иначе довольно трудно "подогнать" размеры всех описаний разных bbcode под один стандарт.
Код: Выделить всё
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>это подключение библиотеки
Код: Выделить всё
<script type="text/javascript">
function openbox(id){
display = document.getElementById(id).style.display;
if(display=='none'){
document.getElementById(id).style.display='block';
}else{
document.getElementById(id).style.display='none';
}
}
</script>это скрипт открытия основного блока
Код: Выделить всё
<script type="text/JavaScript">
$(document).ready(function() {
$(".info_content").hide();
$("ul.infos span:first").addClass("active").show();
$(".info_content:first").show();
$("ul.infos span").click(function() {
$("ul.infos span").removeClass("active");
$(this).addClass("active");
$(".info_content").hide();
var activeInfo = $(this).find("a").attr("href");
$(activeInfo).fadeIn();
return false;
});
});
</script>а это скрипт перебора по кнопкам.
Успехов.
После всех правок почистите все кэши и наслаждайтесь новой игрушкой.
Надеюсь проблем не будет.
В файле bbcode_info.html прописаны 2 скрипта, подключение библиотеки и css-код. если у вас из этого уже что-то есть - можно удалить из кода.
не проверял - будет ошибка при дублировании или нет..  но всё работает. |
По общему FAQu тоже думаю, надо полностью его менять. В стандартном виде это мусор.
