Сообщение от
bioroido
в данном случае тэг SPOILER будет использоваться для скрывания тяжеловесного контента. Что должно в идеале снизить нагрузки на сервер и на каналы/нервы/глаза пользователей.
Стандартная реализация никак не снижает нагрузки, просто к диву стиль display:none дописывает.
Чтоб снижала нагрузки, нужно с AJAXом играться + отдельную таблицу в БД делать, чтоб содержимое спойлеров хранить - ИМХО, результат не стоит того.
Так вот по поводу стандартной реализации (и без всяких хаков) - в админке vBulletin есть раздел управления BB-кодами ("Custom BB-code" на английском).
Там добавляем новый BB-code (важные пунты отмечены жирным):
Title: Спойлер (любой текст)
BB Code Tag Name: spoiler
Replacement: об этом ниже
Example: пример употребления (любой текст)
Description: описание (любой текст)
Use {option}:yes (если нужно использовать "название спойлера)
Button Image (Optional): картинка для отображения на панели инструментов (при добавлении сообщения),
чтоб юзеры не запутались - можно использовать вот эту:
В поле Replacement указывается HTML-код, на который будет заменяться спойлер, есть 2 переменные - {param} и {option}
в option будет имя спойлера, в param - его текст, например Скриншоты
(имеется в виду
Показать скрытый текст {option}
{param}
)
Теперь по поводу самого HTML-кода:
только что глянул первый попавшийся форум со спойлерами - там сделано так:
Спрятанный спойлер:
Код HTML:
<div class="spoiler-wrap">
<div class="spoiler-head folded clickable">текст</div>
<div class="spoiler-body" style="display: none;"> hello </div>
</div>
Отображённый спойлер:
Код HTML:
<div class="spoiler-wrap">
<div class="spoiler-head folded clickable unfolded">название спойлера</div>
<div class="spoiler-body" style="display: block;">текст спойлера</div>
</div>
ИМХО, перемудрили с классами, можно сделать семантичней и проще:
ВОТ ТАК:
Спрятанный:
Код HTML:
<dl class="spoiler">
<dt>Название спойлера</dt>
<dd>Текст спойлера</dd>
</dl>
Отображенный:
Код HTML:
<dl class="spoiler unfolded">
<dt>Название спойлера</dt>
<dd>Текст спойлера</dd>
</dl>
Плюс соответсвующие стили:
Код HTML:
....
....тут общие стили...
и скрываем содержимое спойлера по умолчанию:
dl.spoiler dd{display: none;}
а здесь единственное измение для показанного спойлера (когда javascript'ом дописываем класс unfolded элементу DL
Код HTML:
dl.unfolded dd{display:block}
тем самым показываем скрытый текст.
в CSS можно что-нибудь такое:
Код HTML:
dl.spoiler dt{
background: #e7ebf6;
border:1px solid #d1d1e1;
cursor:pointer;
margin:0;
padding:5px;
font-weight: bold;
}
dl.spoiler dd{
background: #efeffa;
border:1px solid #d1d1e1;
border-top-width:0;
margin:0;
padding:3px;
}
HTML код в редакторе BB-CODE форума в поле Replacement будет выглядеть так:
Код HTML:
<dl class="spoiler">
<dt>{option}</dt>
<dd>{param}</dd>
</dl>
если имя спойлера не нужно, можно и так:
Код HTML:
<dl class="spoiler">
<dt>Скрытый текст</dt>
<dd>{param}</dd>
</dl>
Javascript onclick прикручивается либо сразу в редакторе BB-code к кадому элементу DT, либо какая-нить функция после загрузки страницы пробегает по всем элементам DL с классом "spoiler" и назначает их потомкам (DT) соотвественный onclick, дописывающий, либо стирающий класс "unfolded".
Вооот, заодно и manual написал себе на будущее
Социальные закладки