Иногда инфомацию на сайте
хочется убрать от посторонних глаз по разным причинам. Речь не идет о
запрете к просмотру, скорее о временном ее сокрытии. Опять же цель может
быть разной: от простого оффтопа до частого случая - спойлера. В любом случае, это не должно "бросаться" в глаза, поэтому и требует скрытия.

В этой статье я опишу способ, с помощью которого можно осуществить
функцию скрытия спойлера (наиболее частого случая скрываемой информации)
в системе UcoZ.

Обычно под спойлером понимается преждевременно раскрытая важная информация, которая портит впечатление от игры/книги/фильма и разрушает их интригу.
Далеко не все хотят читать спойлеры, хотя они все равно есть, и от
этого никуда не деться. Единственный возможный способ уберечь читателя
от подобной информации - скрыть ее кнопкой, которая при нажатии
открывает спойлер. Проще всего это сделать с помощью html-кода кнопки input class="button". Чтобы она заработала, достаточно вставить ее в текст (при этом убедитесь, что html поддерживается при добавлении материала).

<input class="button" style="color: #F8912A; background: #333333; font-size: 1.0em; font-family: Verdana, Arial, Helvetica, sans-serif; border: solid 1px #F8912A;" onclick="return toggleMe('200807072300')" value="Нажмите, чтобы увидеть спойлер" type="button"></div><div id="200807072300" style="display: none;">

Конечно, чтобы кнопка работала исправно, необходимо ее настроить. Во-первых, я имею ввиду ее внешний вид. Синим цветом в коде обозначен стиль кнопки, а именно цвет шрифта, цвет фона, размер и тип шрифта, тип, толщина и цвет рамки. Зеленым цветом обозначена надпись на самой кнопке, которую будут видеть пользователи. Ну, и наконец, красным цветом обозначена идентификатор (id) вашей кнопки. Он должен быть уникальным,
иначе кнопка может работать некорректно. Проще всего использовать
вместо идентификатора дату и время добавления материала (например,
сейчас 7 июля 2008, 23:00. Значит, идентификатор будет иметь вид
200807072300). Согласитесь, при таком задании id проблем с повторением
номера не будет.

Даже если вы все сделали правильно, то кнопка все равно не будет работать. Необходимо добавить скрипт перед тегом </head>
в код страницы, где находится ваш материал со спойлером. Будьте
внимательны на данной стадии, зачастую скрипт ставят не туда, поэтому
кнопка не работает.

К примеру, моя кнопка будет использоваться в полном тексте статьи. Значит, мне надо зайти в Управление Дизайном -> Каталог статей (Страница материала и комментариев к нему) и добавить скрипт:

<script type='text/javascript'> function toggleMe(a){ var e=document.getElementById(a); if(!e)return true; if(e.style.display=="none"){ e.style.display="block" } else { e.style.display="none" } return true; } </script>

Теперь ваша кнопка должна прекрасно функционировать. Хотя, хочу вас
предупредить, что при использовании на сайте "недоделанных" или
неправильно поставленных скриптов, кнопка может попросту не работать.
Хотя, это частое явление при неправильном совмещении нескольких
java-скриптов. Будьте осторожны. Ниже наглядный пример использования
описанной выше кнопки спойлера. Нажмите, чтобы читать статью дальше.

А теперь мы попробуем сделать стандартную кнопку спойлера на форуме,
чтобы пользователи смогли общаться с возможностью скрывать
нежелательную информацию от посторонних глаз. При желании, ее можно
использовать для скрытия оффтопа (общения, выходящего за рамки
установленной темы).

Сделать это совсем несложно, а результат порадует вас и ваших пользователей. Для начала зайдите в Управление Дизайном -> Форум (Вид материалов) и вставьте в самый конец кода следующий скрипт:

<script type="text/JavaScript"> function toggle_show(id) { document.getElementById(id).style.display = document.getElementById(id).style.display == 'none' ? 'block' : 'none'; } var BaseCutR; var StartCutR; var EndCutR; var PreCutR; var CheckCutR; var StringCutR = "none"; var BoolCutR = false; var intrd=Math.random() var intrd2=Math.random() ; var rvalue=Math.round((intrd * 00000000000000000000000000000000000000000000000000000000000000000000) /(intrd2 * 1000000000000000000)); var intrd3=Math.random() var intrd4=Math.random() ; var rvalue2=Math.round((intrd3 * 100000000000000000000000000000000000000000000000000000000000)/(intrd4 * 1000000000000000000000000000)); var siteSpoiler = document.getElementById("msg" + $ID$).innerHTML; if( siteSpoiler.indexOf("[spoiler") > -1) { for(i=0;i<=siteSpoiler.lastIndexOf('[/spoiler]');i++) { if ( siteSpoiler.indexOf("[spoiler=") > -1) { BaseCutR=siteSpoiler.indexOf("[spoiler="); StartCutR=(BaseCutR + "[spoiler=".length); PreCutR=siteSpoiler.slice(StartCutR).indexOf("]"); EndCutR=(StartCutR + PreCutR); CheckCutR=(EndCutR + siteSpoiler.slice(StartCutR).indexOf('[spoiler')) if ( CheckCutR == EndCutR - 1 || EndCutR < CheckCutR ) { BoolCutR = true; } if ( BoolCutR == true ) { StringCutR = siteSpoiler.slice(StartCutR, EndCutR); } } siteSpoiler = siteSpoiler.replace(' ','<font color=#000000><b><a href="javascript://" onClick="toggle_show(' + "'" + 'spMsgEntry$ID$' + rvalue + i + "'" + ');">[Отобразить спойлер]</a></b></font><div id="spMsgEntry$ID$' + rvalue + i + '" style="display: none;">').replace('[spoiler=','<font color=#000000><b><a href="javascript://" onClick="toggle_show(' + "'" + 'spMsgEntry$ID$' + rvalue2 + i + "'" + ');">[ ' + StringCutR + ' ]</a></b></font><div id="spMsgEntry$ID$' + rvalue2 + i + '" style="display: none;">').replace(' ','</div>').replace((StringCutR + ']'), ''); } document.getElementById("msg" + $ID$).innerHTML = siteSpoiler; } </script>

На самом деле, это уже не кнопка, а скоре ссылка, открывающая информацию
под ней. Она смотрится полегче, чем кнопка спойлера, которую мы
рассматривали выше, и выглядит довольно аккуратно (вот пример). Тем ни менее, ее тоже можно настроить по вашему желанию. Синим цветом обозначен цвет ссылки. В данном случае он черный. Зеленым цветом выделена стандартная надпись
ссылки, на которую будет нажимать пользователь, пожелавший прочитать
спойлер. Большим достоинством этой "кнопки" спойлера является
возможность изменения стандартной надписи. Но об этом чуть позже.

Теперь там же (Управление Дизайном -> Форум (Вид материалов)) найдите $MESSAGE$ и замените его на

<div id="msg$ID$">$MESSAGE$ </div>

Если вы все сделали правильно, то кнопка спойлера должна работать на вашем форуме, когда вы скроете информацию кодами

<div style="display:none"><input type="button" title="Спойлер" value="Спойлер" onclick="simpletag('spoiler','','','message','')" class="codeButtons" name="spoiler"></div> <script> elem=document.all.spoiler; obj=document.addform.i.parentNode; obj=document.getElementById('frM58').childNodes[1]; obj.insertBefore(elem, obj.childNodes[12]); </script>

Вот и всё! Теперь любой спойлер может быть скрыт посредством удобной
кнопки на вашем форуме. Более того, вы можете изменять стандартный текст
ссылки, используя код [spoiler=Привет]Здесь спойлер[/spoiler]


Понравилась статья-Жми +1 Нравится