Тег спойлера (spoiler tag)

На нашем сервисе появилась возможность установить тег спойлера.

Пример работы спойлера:
[Показать/Скрыть]

Этот текст находится в спойлере

Внимание! Для форумов созданных после написания этого сообщения и при этом использующих стандартный скин эти изменения можно не проводить. Они сделаны автоматически. Если ваш форум создан после написания этого сообщения, но вы используете не стандартный скин: нужно провести описанные ниже изменения.

Установка предельно проста.

Шаг 1:

Идём в АдминЦентр -> Скины и Шаблоны -> HTML шаблоны -> Выбраем нужный скин -> Настройка HTML -> Post Screen Section -> get_javascript

Находим:

Ниже добавляем:

Идём в АдминЦентр -> Скины и Шаблоны -> HTML шаблоны -> Выбраем нужный скин -> Настройка HTML -> Post Screen Section -> +-- Post: Code Buttons & Post Text area

Находим:

Ниже добавляем:

Внимание! Если на вашем форуме используется несколько скинов, необходимо сделать эти изменения для всех.

Всё! О всех ошибках работы мода просьба сообщать в этой теме.

Romych, о а можно ли получить исходник в лс?

Цитата (аsm-а @ Авг 31 2010, 20:58)

Romych, о а можно ли получить исходник в лс?

можно, только ещё не всё доделал, что запланировал

Romych, мы всегда только приветствуем разработку полезных модификаций. Я только за.

Romych,
Весьма не плохо.
Вот только мелкие траблы в Хроме есть...
Тоже не отказался бы от исходного кода в лс, поковырялся бы немного в нём

От вы какие: "тоже бы покопался" - сами сначала попробуйте сделать, а потом и покопатся Ромыч, хорошо, я за.

Romych,мне кажется,что он весьма пригодится на форумах
Доделывайте и выкладывайте код

в общем вот он обновлённый спойлер,
не знаю может надо было другую тему создать,
но пишу здесь

как я уже говорил, для эффектности и работы с отображениями собственных названий кнопки спойлера, используется скриптовая библиотека jQuery
в идеале было бы лучше конечно, если бы её можно было иметь со стороны сервиса, а не цеплять с сторонних ресурсов
и выглядело бы это примерно так <script type='text/javascript' src='html/jquery.min.js'></script>
но пока, что будем делать вот так


Обновлённый спойлер (вариант с jQuery)

1. сначала подгружаем jQuery
заходим в АдминЦентр -> Скины и Шаблоны -> HTML шаблоны -> Выбраем нужный скин -> Настройка HTML -> Глобальные шаблоны (Global HTML elements) -> Board Header (logo, links, etc) редактировать

в самый верх добавляем

Цитата

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

2. добавляем стиль спойлера (цвет фона, отступы и т.д.)
АдминЦентр -> Скины и Шаблоны -> HTML шаблоны -> Выбраем нужный скин -> Настройка CSS (редактировать)
в самый низ добавляем

Код

.block2 {
background:none repeat scroll 0 0 #FFFFF0;
margin-top:7px;
padding:5px;
}

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

в АдминЦентр -> Скины и Шаблоны -> HTML шаблоны -> Выбраем нужный скин -> Настройка HTML -> Просмотр темы (Topic View Section) -> Footer редактировать

вверху загружаем

Скрытый текст

Для просмотра этого блока необходима регистрация

4. затем добавляем обработчик тега, позволяющий нам давать собственные названия для кнопки спойлера,
типа "Жми", "Показать", "Спойлер", "Кот в мешке" и т.д.

в АдминЦентр -> Скины и Шаблоны -> HTML шаблоны -> Выбраем нужный скин -> Настройка HTML -> Post Screen Section -> get_javascript

перед закрывающим тегом

//-->
</script>

добавляем

Скрытый текст

Для просмотра этого блока необходима регистрация

обработчик работает с выделенным текстом

5. и наконец сама кнопка в панели ответа

идём в АдминЦентр -> Скины и Шаблоны -> HTML шаблоны -> Выбраем нужный скин -> Настройка HTML -> Post Screen Section -> +-- Post: Code Buttons & Post Text area

ищем там

Код

<img title='Спойлер' alt='Спойлер' src='/html/buttons/spoiler.gif' onClick='simpletag("SPOILER")'   class='codebuttons' name="SPOILER" onMouseOver="hstat('spoiler')" />

заменяем на

Код

<img class='codebuttons' title='Спойлер' alt='Спойлер' src='http://www.pushkino.org/ipb/html/UBBC/spoiler.gif' onclick='tag_spolier()'  />

хотя по большому счёту там меняется только значение onclick='...'

ну в общем то всё

ПРИМЕР тот же

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

есть вариант без использования jQuery
с менее эффектым появление и своё название кнопке в таком варианте назначать не получится, будет только Показать в закрытом виде и Скрыть в открытом

Установил новый спойлер,но как-то не до конца он работает.
Перестала работать кнопка"Закрыть все теги" в форме ответа.Закрыл тег вручную-всё равно не получается.
Ссылка
Скрин прилагается


Это сообщение отредактировал Ustas - Сен 3 2010, 11:08

Ustas

у вас спойлер не сработал потому, что в тегах [/spoil]
должен быть не только текст, но и название-описание кнопки
[spoil]привет[/spoil] - не так

[spoil]привет бла бла бла|спойлер[/spoil] - а вот так хотя бы

я уже писал, что проще работать с выделенным текстом,
т.е. есть вы пишете новость или длинный ответ кому-то обрабатываете его всеми тегами, какими нужно, цвет шрифт и т.д.

и понимаете, что текст получился слишком большой и выделив его, или часть его прячете его под спойлером, всё должно работать

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

Это сообщение отредактировал Romych - Сен 3 2010, 12:36

Цитата (Romych @ Сегодня, 13:28)

у вас спойлер не сработал потому, что в тегах [/spoil]
должен быть не только текст, но и название-описание кнопки
[spoil]привет[/spoil] - не так

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

Dron,Romych,виноват-всё исправил и отлично работает.
По + вам добавил.

Доброго времени суток. У меня проблема. Оочень надеюсь на помощь Romych .

У меня на форуме стоял Видео+МП3 плеер. Поставил этот спойлер и конец пришел, и видео и аудио плееру... Догадываюсь в чем проблема, Romych описывал ее в теме с галереей.Там что то с чем то съедается.... Я думаю вы меня поняли)

Как мне на форум поместить сразу все? И видео, и аудио, и галерею с этим спойлером? У вас на тест форуме все это стоит. Хотелось бы увидеть код. И если можно куда поместить его.

Спасибо. Очень надеюсь на вашу помощь.

Цитата (Assada @ Сен 3 2010, 19:33)

Доброго времени суток. У меня проблема. Оочень надеюсь на помощь Romych .

У меня на форуме стоял Видео+МП3 плеер. Поставил этот спойлер и конец пришел, и видео и аудио плееру... Догадываюсь в чем проблема, Romych описывал ее в теме с галереей.Там что то с чем то съедается.... Я думаю вы меня поняли)

Как мне на форум поместить сразу все? И видео, и аудио, и галерею с этим спойлером? У вас на тест форуме все это стоит. Хотелось бы увидеть код. И если можно куда поместить его.

Спасибо. Очень надеюсь на вашу помощь.

Обратные слэши съедаются.Надо ставить все вместе.

Снова не работает.При написании предыдущего моего поста всё работало,а сёйчас чудеса.
См. здесь
http://forum.zanzibars.ru/index.php?act=ST&f=32&t=840

пытался одновременно вставить:


[Показать/Скрыть]

Код

<!--Spoiler-->  <script type="text/javascript">  $(document).ready(function(){  $("div.postcolor > input.spoiler-button").click(function(){  $(this).parents("div.postcolor").find("div.block2").toggle("slow");  var a = $(this).attr('value');$(this).attr('value',$(this).attr('id'));$(this).attr('id',a);  });  });  var spl, html;  var div = document.getElementsByTagName("div")  for( i=0; i < div.length; i++ )  {  if(div[i].className == 'postcolor')  {  html = div[i].innerHTML;  spl = /\\[spoil\\](.*?)[\\|](.*?)\\[\\/spoil\\]/g  html = html.replace(spl, "<input id='close' class='spoiler-button' style='width:140px;font-size:10px; margin:3px; cursor:pointer' type='button' value='$2'><div class='block2' style='display:none; border:1px solid black;'>$1</div>")  div[i].innerHTML = html}}  </script>  <!--универсальный видеоплеер v.3.1-->  <script type="text/javascript">  var vide, html;  var div = document.getElementsByTagName("div")  for( i=0; i < div.length; i++ )  {  if(div[i].className == 'postcolor')  {  html = div[i].innerHTML;  if (html.indexOf('[/youtube]')) {  vide = /\\[youtube\\]([0-9a-zA-Z\\-\\_]{11})\\[\\/youtube\\]/g  html = html.replace(vide, "[video]http://www.youtube.com/watch?v=$1[/video]")  }  if (html.indexOf('http://flv.video.yandex.ru/lite' )) {  vide = /\\[video\\]\\[flash=([0-9]+)\\,([0-9]+)\\,(.*?)\\/lite\\/(.*?)\\[\\/video\\]/g  html = html.replace(vide, "<br><embed src='http://flv.video.yandex.ru/lite/$4' quality='high' allowFullScreen='true' scale='noscale' width='480' height='360' type='application/x-shockwave-flash'></embed><br>")  }  if (html.indexOf('mail.ru')) {  vide = /\\[video\\]http:\\/\\/video\\.(.*?)\\/(.*?)\\.html\\[\\/video\\]/g  html = html.replace(vide, "<br><embed src=http://img.$1/r/video2/player_v2.swf?movieSrc=$2 type='application/x-shockwave-flash' width=626 height=367 allowScriptAccess='always'></embed><br>")  }  if (html.indexOf('smotri.com')) {  vide = /\\[video\\]http:\\/\\/(.*?)\\/video\\/view\\/\\?id=(.*?)\\[\\/video\\]/g  html = html.replace(vide, "<br><embed src='http://pics.$1/scrubber_custom8.swf?file=$2&bufferTime=3&autoStart=false&str_lang=rus&xmlsource=http://pics.$1/cskins/blue/skin_color_lightaqua.xml&xmldatasource=http://pics.$1/skin_ng.xml' quality='high' allowscriptaccess='always' allowfullscreen='true' wmode='opaque' width='480' height='360' type='application/x-shockwave-flash'></embed><br>")  }  if (html.indexOf('rutube.ru')) {  vide = /\\[video\\]http:\\/\\/(.*?)\\/tracks\\/(\\d+)\\.html\\?v=(.*?)\\[\\/video\\]/g  html = html.replace(vide, "<br><embed src='http://video.$1/$3' type='application/x-shockwave-flash' wmode='transparent' width='480' height='360' allowFullScreen='true'></embed><br>")  }  if (html.indexOf('http://www.youtube.com' )) {  vide = /\\[video\\](.*?)\\?v=(.*?)\\[\\/video\\]/g  html = html.replace(vide, "<br><embed src='http://www.youtube.com/v/$2' type='application/x-shockwave-flash' wmode='transparent' allowfullscreen='true' allowscriptaccess='always' flashvars='fs=1&rel=0' width='480' height='360'></embed><br>")  }  if (html.indexOf('vimeo.com')) {  vide = /\\[video\\]http:\\/\\/(.*?)\\/(\\d+)\\[\\/video\\]/g  html = html.replace(vide, "<br><embed src='http://$1/moogaloop.swf?clip_id=$2&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;fullscreen=1' type='application/x-shockwave-flash' wmode='transparent' allowfullscreen='true' allowscriptaccess='always' width='480' height='360'></embed><br>")  }  if (html.indexOf('dailymotion.com')) {  vide = /\\[video\\]http:\\/\\/(.*?)\\/video\\/(.*?)\\[\\/video\\]/g  html = html.replace(vide, "<br><embed src='http://$1/swf/video/$2' type='application/x-shockwave-flash' wmode='transparent' width='480' height='360' allowfullscreen='true'></embed><br>")  }  if(html.indexOf("http://kiwi.kz")) {  vide = /\\[video\\](.*?)\\/watch\\/(.*?)\\/\\[\\/video\\]/g  html = html.replace(vide, "<br /><embed src='http://v.kiwi.kz/v/$2' type='application/x-shockwave-flash' width='480' height='360' allowFullScreen='true' allowScriptAccess='always' wmode='transparent'><br>")  }   if (html.indexOf('http://vids.myspace.com' )) {  vide = /\\[video\\](.*?)\\=(\\d+)\\[\\/video\\]/g  html = html.replace(vide, "<br><embed src='http://mediaservices.myspace.com/services/media/embed.aspx/m=$2,t=1,mt=video,searchID=,primarycolor=,secondarycolor=' width='480' height='360' allowFullScreen='true' type='application/x-shockwave-flash' wmode='transparent'/></embed><br>")  }  if (html.indexOf('http://vkontakte.ru' )) {  vide = /\\[video\\](.*?)\\ src="(.*?)\\" (.*?)\\[\\/video\\]/g  html = html.replace(vide, "<br><iframe src='$2' width='607' height='360' frameborder='0'></iframe><br>")  }  div[i].innerHTML = html}}  </script>  <!--Универсальный mp3-плеер-->  <script type="text/javascript">  var mus, html, result;  var div = document.getElementsByTagName("div")  for( i=0; i < div.length; i++ )  {  if(div[i].className == 'postcolor')  {  if(div[i].innerHTML.indexOf("[music]")!=-1 && div[i].innerHTML.indexOf("[/music]")!=-1)  {   html = div[i].innerHTML;   mus = /\\[music\\]([0-9a-zA-Z\\-\\_\\+\\(\\)\\&\\?\\%\\$\\#\\~\\.\\'\\"\\=\\^\\;\\:\\,\\{\\}\\/]{1,110})\\[\\/music\\]/g   result = html.replace(mus, "<br><embed src='http://www.demo-music.ru/pleer/pleer4.swf' type='application/x-shockwave-flash' allowscriptaccess='always' wmode='transparent' flashvars='comment=demo-music.ru&amp;st=http://www.demo-music.ru/pleer/style_pleer.txt&amp;file=$1' width='470' height='33'></embed><br>") div[i].innerHTML = result}}}  </script>  <!--Фотогалерея-->  <script type="text/javascript">  var fot, html, result;  var div = document.getElementsByTagName("div")  for( i=0; i < div.length; i++ )  {  if(div[i].className == 'postcolor')  {  if(div[i].innerHTML.indexOf("[foto]")!=-1 && div[i].innerHTML.indexOf("[/foto]")!=-1)  {   html = div[i].innerHTML;   fot = /\[foto\]([0-9a-zA-Z\-\_\+\(\)\&\?\%$\#\~\.\'\"\=\^\;\:\,\{\}\/]{1,110})[\|]([^\[]{1,110})\[\/foto\]/g   result = html.replace(fot, "<a href='$1' rel='lyteshow[vacation]' title='$2'><img style='border: 10px; top:2px; margin:5px;' img src='$1' border='10' width='100'/></a>") div[i].innerHTML = result}}}  </script>

Цитата

Извините, но в данный момент сервер сильно перегружен.Приносим свои извинения, просим Вас зайти немного позже.