понедельник, 13 июля 2009 г.

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


27 Комментариев :

AT комментирует...

Использую что-то подобное у себя на блоге (http://zametki.ametov.net) для отображения перевода некоторых новых слов. Всё собираюсь выложить код, но руки не доходят.

Croaker комментирует...

Глянул только что; симпатично смотрится.

Alekks-all комментирует...

Я вот нихера не понял...
1 пункт полностью копировать к себе в шаблон??

Croaker комментирует...

Первый пункт полностью, второй из апдейта 27.08.2009

Alekks-all комментирует...

вот реальный пост на эту тему:))
http://blogger4you.blogspot.com/2009/08/blogger-read-more-for-laziest-bloggers.html#comment-form

Croaker комментирует...

Абсолютно не согласен.
В блоге Светы приведена реализация так называемого ката (cut – обрезка) сообщения. Более того – это одна из худших его реализаций.

В данной статье скрипт для скрытия произвольных фрагментов текста хоть внутри статьи, хоть на главной странице. Т.е. – для совершенно других задач. Тут и сравнивать нечего.

В качестве же именно ката я использую «классическую» его реализацию, которая может и сложнее, зато надежная как танк. Кстати, тоже «не фонтан», но за неимением лучшего...

Alekks-all комментирует...

Ну да... я посмотрел, у тебя абсолютно по другому..Завтра попробую сделать по твоему, но я чкть чуть не понял.
Как я понял, у тебя можно самостоятельно скрывать часть текста??!!!
Первый раз я пробовал, у меня получилось следующее.."скопировал пурвый пункт, и его последняя часть высвечивалась в начале блога, т.е. сверху (видимо не задействовался) завтар попробую еще напишу тебе какая часть именно высвечивалась.

Alekks-all комментирует...

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

Croaker комментирует...

Я теперь уже запутался, тебе все-таки прятать часть текста под катом нужно или скрытые области?

Если кат, то глянь у Светы на блоге. Классическая реализация от Blogger у нее есть по-любому. Удивлюсь, если нет :).

По поводу скрытых кусков, сделай пробный пост «задним числом», прошлым годом например. Я гляну.

Den3er комментирует...

Спасибо, пригодилось.

Unknown комментирует...

А он только текст скрывает?
Можно ли скрыть скрипт к примеру?

Den3er комментирует...

А можно, что нибудь сделать, что бы они друг в друге работали?

Coollingua_admin комментирует...

Спасибо, очень нужная вещь))

Aleksandr комментирует...

всё зделал правильно вроде))) работает на ура!!!
проблемка лишь в том что текст в картинке спойлера не находится в центре
http://i4.fastpic.ru/big/2010/0515/a3/37dea612c243d39436a6ece5a18248a3.jpg

Aleksandr комментирует...

посмтреть можно тут http://quakelivesport.blogspot.com/

Z комментирует...

Всё работает, сенк.. думаю над дизайном.. а можно без картинки реализовать?

Z комментирует...

разобрался, спасибо, очень даже не плохо работает! молодца!

George-Perec комментирует...

Приветствую, подскажите как убрать в спойлере widget by Ruby Brewed в обмен на добавление ссылки вашего блога в Блогролл на постоянной основе.

serg2001 комментирует...

3 часа повозился, но разобрался...
все работает, спасибо.

clannadik комментирует...

У меня спойлеры видны только в браузере Opera

Croaker комментирует...

clannadik, а у меня еще и в Firefox и Chrome. Честно-честно. А «Эксплорер» я не люблю. Совсем. «Оперу», впрочем, тоже; но тут возможно я не прав. Но не люблю.

Unknown комментирует...

Не удалось проанализировать ваш шаблон, так как он неправильно сформирован. Убедитесь, что все элементы XML правильно закрыты.
Сообщение об ошибке в XML: The element type "style" must be terminated by the matching end-tag "".
такое вот выдает.....
что делать? =(((

Croaker комментирует...

clown выдает сообщение, что отсутствует закрывающий тег </style>

Пример как должно быть:
<style type="text/css">
...
</style>

slovelissimo комментирует...

Использую у себя,спасибо.

CoByX комментирует...

Спасибо, работает.

skunk-anansie комментирует...

http://langue-fr.blogspot.com/2011/06/dfdfs.html проблема,не знаю что не так ((( устанавливала пару дней назад , проверила работало ,а сейчас пытаюсь его активизировать ничего. в чем может быть проблема ? заранее спасибо

Lucky комментирует...

Как изменить цвет спойлера ?

Отправить комментарий

Жги!