Спойлер в шаблоне DLE
10-12-2010, 23:03. Разместил: gorilaz
Используем родной спойлер DLE для скрытия объёмной и маловажной информации в шаблоне.
Это мой первый хак для DLE.
Всё очень просто, я добавил на сайт комментарий со спойлером и в исходном коде страницы нашёл его:
<!--dle_spoiler--><div class="title_spoiler"><img id="image-935940ce50a4de96f0d6c3b96d4ccef7" style="border: medium none; vertical-align: middle;" alt="" src="/templates/Шаблон/dleimages/spoiler-plus.gif"> <a href="javascript:ShowOrHide('935940ce50a4de96f0d6c3b96d4ccef7')"><!--spoiler_title-->Показать / Скрыть текст<!--spoiler_title_end--></a></div><div id="935940ce50a4de96f0d6c3b96d4ccef7" class="text_spoiler" style="display: none;"><!--spoiler_text-->Здесь скрытый текст<!--spoiler_text_end--></div><!--/dle_spoiler-->
Я удалил из него лишние комментарии и в 3-х местах поменял ID с 935940ce50a4de96f0d6c3b96d4ccef7 на spoilerid1. Обращаю ваше внимание на то, что ID у каждого спойлера должен быть уникальным, если на странице будет 2 спойлера с одинаковым ID, то работать будет только первый.
<!--spoiler--><div class="title_spoiler"><img id="image-spoilerid1" style="border: medium none; vertical-align: middle;" alt="" src="/templates/Шаблон/dleimages/spoiler-plus.gif"> <a href="javascript:ShowOrHide('spoilerid1')"> Показать / Скрыть текст </a></div><div id="spoilerid1" class="text_spoiler" style="display: none;">
Здесь скрытый текст
</div><!--spoiler_end-->
Здесь скрытый текст
</div><!--spoiler_end-->
В результате у меня получилась готовая конструкция, в которую я могу вставить то, что мне нужно. Для примера я вставил в неё список похожих новостей. В файл /templates/Ваш шаблон/fullstory.tpl добавил:
<!--spoiler--><div class="title_spoiler"><img id="image-spoilerid1" style="border: medium none; vertical-align: middle;" alt="" src="/templates/Шаблон/dleimages/spoiler-plus.gif"> <a href="javascript:ShowOrHide('spoilerid1')"> Похожие новости:</a></div><div id="spoilerid1" class="text_spoiler" style="display: none;">
{related-news}
</div><!--spoiler_end-->
{related-news}
</div><!--spoiler_end-->
Результат вы можете увидеть на скрине в начале статьи.
Автор: NiK
Вернуться назад