Cкрытый текст в сообщениях блога

Или «как в блоге прятать текст под спойлеры». Недавно написал небольшой javascript-компонент Widget SpoilerManager для использования скрытого текста в блоге. Собственно, это та «культурная программа», которой я посвятил прошлую субботу. Да, я псих.

UPD: Последний раз я доверил свои файлы богом проклятому сервису HotLinkFiles! Пусть горит в аду! Позже выложу в текстовом виде.

Пример:

Спойлер (от англ. spoil — портить) — в кино, компьютерных играх, литературе — преждевременно раскрытая важная информация, которая портит впечатление от игры/книги/фильма и разрушает их интригу, а также лишает читателя некоторой части удовольствия от сюжета.
цитата из Википедии: Спойлер (кино)

Как использовать

1. Создай стили CSS для компонента:
   

   /* Стили для спойлера */
   .bar {
     background:#B2BDCB url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj91MO6k3OKdYj59ONnuGLGObIMEJLBtDbz7lDf4L4_QOHq3x_bp5P8ra-DgCtL2XRJh1KtVd96j3CcxIvDto-b9nI8On3Zjv9Z-x1BftnGyEr9LrR2eHtJnZ7kIOai5Www6hgtWPjvoBFw/') no-repeat;
     padding-left: 30px;
     color: #1A3457;
     height:26px;
     font-weight:bold;
     cursor:pointer;
   }
   /* Скрытый спойлер */
   .spoiler-hidden .bar {
     background-position: 0 0;
   }
   .spoiler, .spoiler-hidden .text {
     display: none;
   }
   /* Открытый спойлер */
   .spoiler-visible .bar {
     background-position: 0 -26px;
   }
   .spoiler-visible .copy {
     text-align:right; font-size:0.6em;
   }
   .spoiler-visible .text {
     display:visible;
     padding: 0 1em;
     border: 1px dashed #B2BDCB;
     border-top-width:0;
   }



2. Включи код спойлера сразу перед закрывающим тегом </body> (см. апдейт)
   

   <script src='http://www.hotlinkfiles.com/files/2667809_ezrak/widget_spoiler.js' type='text/javascript'></script>
   <script type='text/javascript'>
   /* Для предотвращения проблем с кириллицей, задай надпись по умолчанию */
   WidgetSpoilerManager.setOption ("defaultTitleText", "Скрытый текст");
   /* Запусти виджет Спойлер-Менеджера */
   WidgetSpoilerManager.init();
   </script>

   
   UPD 19.07.2009
   Скрипт залит на файлохранилище №1.
   Подключать файл (первая строка предыдущего листинга) можно так:
   

   <script src='http://sites.google.com/site/railsdepot/files/widget_spoiler.js' type='text/javascript'></script>

   
   UPD 27.08.2009
   Полный код для второго пункта:
   

   <script src='http://sites.google.com/site/railsdepot/files/widget_spoiler.js' type='text/javascript'></script>
   <script type='text/javascript'>
   WidgetSpoilerManager.setOption ("defaultTitleText", "Скрытый текст");
   WidgetSpoilerManager.init();
   </script>



3. Сохрани шаблон.


4. В сообщениях используй следующий код:
   

   <div class="spoiler" title="здесь задай краткое описание">
   А здесь текст, который хочешь сделать скрытым
   </div>

Виджет сам найдет и скроет все блоки текста, отмеченные как спойлер.

© dotrb.blogspot.com