Спойлеры в Эгее

5 марта 2012, 18:04

Когда задача из поста про мультиварку была решена, я решил опубликовать решение, не дожидаясь вечера. Но, опубликовав его, понял, что это может испортить удовольствие людям, которые хотели сами придумать решение.

Пришлось по-быстрому прикрутить механизм показа спойлеров к посту. Я решил, что такой механизм может пригодится кому-нибудь ещё, поэтому ниже я расскажу как установить его в блог. Но это — спойлер.

Показать инструкцию по установке
Для начала скачайте архив и распакуйте его в директорию user/extras. После этого подключите их к блогу, добавив в файл header-pre.tmpl.php в той же директории следующие строки:
<script type=«text/javascript» src=«<?= $content['base-href'] ?>user/extras/spoiler-hider.js»></script>
<link rel=«stylesheet» href=«<?= $content['base-href'] ?>user/extras/spoiler-hider.css»>

В пост спойлер вставляется следующей конструкцией:
((html <b class=«spoiler-controller %class_name%»>Показать инструкцию по установке</b>))
((html <div class=«spoiler %class_name%»>))
%скрываемый текст%
((html </div>))

Она, конечно, громоздкая, но прелесть в том, что её можно просто копипастить. Единственное на что нужно обратить внимание: имена классов превдоссылки и контейнера (те, что выделены жирным) должны совпадать.

Если возникнут вопросы — постараюсь ответить в комментариях.

7 комментариев РСС

Илья С.
Спасибо, очень кстати
Илья
А где указывать текст, который заменит «Открыть» при открытии спойлера?
Антон Шеин
В пилотной версии сделано достаточно тупо: при открытии спойлера, слово «показать» меняется на «скрыть» и наоборот.

Т. е. в первой строчке встраиваемого кода вместо «Показать инструкцию по установке» можно писать: «Показать спойлер», «Показать подробности», «Показать решение» и т. п. При показе скрытого блока, фраза поменяется сама.

Возможно, как-нибудь сделаю что-нибудь более интеллектуальное.
Семён Перепелица
Для ссылок, даже внутри документа, лучше использовать тег A:

<a href=«#installation_guide»>Инструкция по установке</a>
<div id=«installation_guide»>
Вот она
</div>
Антон Шеин
Вы можете просто заменить тег <b> на <a href=«#...»>, если считаете, что в этом есть какой-то смысл. Коду всё равно какие теги, он по классам ориентируется.
Александр Гурьянов
Это всё же не ссылка. Больше бы подошёл тег <button>, но могут возникнуть сложности с переопределением стилей
Денис Игнатов
Но в RSS отдается вместе со спойлером, а хотелось бы, чтобы он и там был скрыт.
Антон Шеин
Я пока не знаю как это сделать, не прибегая к ужасным костылям в системных файлах. Но постараюсь что-нибудь придумать.
Дмитрий Валерьевич
Спасибо огромное!
Максим Соловьёв
Надо будет немного по-другому сделать :) например задаваемые параметры, такие как: надпись при закрытом блоке/при открытом, избавление от лишних тэгов.
Надо что-то типа:
«((html <div class=»spoiler %class_name%» title=«Открыть спойлер|Закрыть спойлер«>))
%скрываемый текст%
((html </div>))»

Дело пяти минут :) Но за идею спасибо. Что-то даже не догадался на ЯС сделать его (впрочем и не задумывался особо).

Гораздо больше меня парит идея сделать отправку напрямую, минуя черновики.