Свёртываемые элементы («спойлеры»): сравнительно новая альтернатива хабракату

  • Tutorial
Не так давно Finom выложил блогозапись «Работа с локальным хранилищем, как с объектом — Продолжение» и в ней употребил новинку хабрахабровской разметки: элемент <spoiler></spoiler>. Оказывается, этот элемент ужé документирован в справке по HTML-тегам (в правом верхнем углу над полем редактирования блогозаписей) и может невозбранно употребляться на Хабрахабре (правда, не везде: в комментариях не работает).

Употребляется же эта новинка примерно вот каким образом:

<spoiler title="Заголовок свёртываемого элемента">
Содержимое свёртываемого элемента.

Скрытию может подвергаться не только текст, но и другие элементы гипертекста — например, изображения и гиперссылки:

<a href="http://danbooru.donmai.us/post/show/951110/">
<img src="http://i46.tinypic.com/30axitk.jpg" alt="[V for Vendetta]" title="" border=0></a>
</spoiler>

Результат работы кода этого примера выглядит следующим образом:
Заголовок свёртываемого элемента
Содержимое свёртываемого элемента.

Скрытию может подвергаться не только текст, но и другие элементы гипертекста — например, изображения и гиперссылки:

[V for Vendetta]

Заголовок можно жмякнуть мышóю — и свёрнутое содержимое тотчас же развернётся. Следующий жмяк мышóю по заголовку приведёт содержимое обратно в свёрнутое состояние.

Как видно, это ценная альтернатива хабракату: теперь скрывать можно не только хвост блогозаписи, но и часть её середины, причём для разворачивания такого сокрытого куска нет нужды переходить на другую страницу и тратить время да траффик на её загрузку вместе с комментариями.

Кстати о хабракате. Предел безхабракатной блогозаписи оказался увеличен: прежде можно было без хабраката выложить блогозапись не более 600 символов длиною, а теперь — не более 1000. И это правильно, потому что прежнее ложе было слишком уж прокрустовым.

Полезные, полезные изменения к лучшему.

Важный довесок:  в RSS нет, понятное дело, никакого джаваскрипта, так что все спойлеры отображаются в развёрнутом виде, а их заголовки просто становятся текстом повышенной жирности с новой строки. Имейте это в виду.
Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 41

    +7
    Я рад.
      +5
      В комментариях, судя по предпросмотру, элемент не работает.

      Проверю на всякий случай, не глюк ли это предпросмотра:

      Содержимое свёртываемого элемента.
        +2
        Да, элемент <spoiler></spoiler> игнорируется — а показывается только его содержимое.
        +7
        Полезно. В такую штучку можно будет например крупные куски кода или описания алгоритмов заворачивать.
        А то думаешь: «Вставлю кучу кода с комментариями — статья будет длинная портянка, а выложу ссылкой на zip — тяжело будет комментировать и объяснять принцип работы чего-то там непонятно где в какой-то там зипе.»
        Теперь будет удобнее. Читатели пробегут пост глазами, по заголовкам сами пооткрывают себе только те части, которые заинтересовали.

        Кстати, смотрю, при создании поста это работает. В ответах на Q&A работает. А в коментах не будет?
          +6
          Вопрос к администрации Хабрахабра, собственно. Следовало бы устроить дело так, чтобы в комментариях работали спойлеры. Да и <video></video> заодно.
            +3
            Интересно, когда появится первый пост, целиком состоящий из спойлеров?
            Представьте, заходите в пост, и видите… надпись «Содержание», а под нею много спойлеров, типа:
            -> Введение
            -> Основная тема
            -> Кусок кода блок такой-то с комментариями
            -> Кусок кода блок такой-то с комментариями
            -> Кусок кода блок такой-то с комментариями
            -> Скриншоты
            -> Скачать

            И прям будет ощущение, что читаешь привычную документацию в PDF — сразу можно в нужные разделы прыгнуть.
            Каково, а?
            Интересно так же, что будет первым: со статей Хабра начнут формировать даташиты, или даташиты в статьи Хабра конвертить?
            Скоро Хабр превратится в аналог iBooksAuthor! )))
              +7
              Представьте, заходите в пост, и видите… надпись «Содержание», а под нею много спойлеров, типа:


              ->Осбенности RePack'a
              ->Порядок установки
              ->Скриншоты инсталятора
              ->Скриншоты игры
                0
                -> Скачать торрент

                Как же вы могли забыть!
                  +1
                  на тех трекерах, где бываю я, это не под спойлером (:
              +6
              А еще не помешала бы поддержка тега kbd для отображения кнопок клавиатуры.
            +2
            Спасибо, как-то незамеченным до этого топика прошло данное изменение. Рад ему, поскольку сталкивался с такой проблемой. Один вопрос: почему в мышóю ударение на второй слог?
              +22
              Ну не мЫшою же. А вот почему не «мышкой» — потому что это Мицгол.
                0
                Мне как раз кажется правильным ударние на «ы». Я в курсе, что это Mithgol, и надеялся, что он, как и всегда в подобных случаях, объяснит, почему написал именно так, а не иначе.
                  0
                  «Мышóю» — творительный падеж от слова «мышá», встречающегося в словаре у Даля. К сожалению, гугл находит только те варианты словаря, которые вовсе без ударений: не могу ни подтвердить, ни опровергнуть, что «мышá» с ударением на втором слоге.
                    0
                    (А слова навроде «ржа» и «вша», понятно, ничего не доказывают, потому что не полностью аналогичны: они ведь односложные.)
                      0
                      А, собственно дело в том, что ты используешь слово «мышá», а не «мышь». Это для того, чтобы дифференциировать мышь как животное и «мышá» как устройство?
                        +2
                        Нет, это просто обогащение словоупотребления просторечиями — в рамках борьбы с пахманизмом.
                          +3
                          Интересное мнение насчёт того, что просторечия обогащают речь. Спасибо за разъяснения.
              +7
              Мицгол-то уже не тот… Как же так, борец за чистоту русского языка (мышою, клавиатурою, ага) может употребить буржуйское «траФФик» заместо нашего, исконно-русского, «траФик» ???
                0
                «жмякнуть» круче. Ведь явно «разговорное слово», уж если хочется чисто русское слово использовать — «щелкнуть» было бы ближе.
                  0
                  «нажать» да и всё…
                    0
                    клацнуть
                      +2
                      А будет ли на хабре, интересно, хоть один пост Мицгола, где в комментариях будут обсуждать только содержание поста, и ни разу — выбор слов.

                      Ну серьезно, написал бы кто другой «жмякнуть» — ну и что? Никто бы и не заметил, и не такое бывает…
                        +1
                        Меня слово «жмякнуть» (как и «жмакнуть») бесит одинаково сильно, кто бы его не написал.
                        0
                        Да хрен с ним, со жмяканьем. Я говорю о том, что Мицгол допустил орфографическую ошибку, которая выдает в нем англофила! :)

                        И по понятным мне причинам, до сих пор эту ошибку не поправил. Непоследовательно. То он заменяет англо-неологозмы на староверчесскую речь, а то — не исправляет неграмотно написанное слово.
                          –3
                          Моё скромное мнение состоит в том, что это слово лучше записывать в форме «траффик», а не то в форме «трафик» оно выглядит однокоренным русскому глаголу «трафить» (более известному в форме «потрафить»), хотя на самом деле таковым не является.
                            +1
                            Простите, но слово «трафик» (с одной «ф») — это вполне себе словарное слово («дорожный трафик»), появившееся в русском языке до пришествия интернетов. И иметь «собственное мнение», противоречащее всем словарям — по меньшей мере — странно.
                      +1
                      всетки по-моему более спортивно было бы сделать загрузку картинок под спойлером только в момент раскрытия спойлера?
                        +5
                        Читаю хабр через RSS. Там эта новомодная потеха не работает.
                          +3
                          Это наблюдение справедливо и важно, так что я сейчас внёс его во блогозапись.
                          +1
                          Эти спойлеры ко всему еще и вложенными можно делать, правда при открытии внешнего автоматически открываются и все внутренние…
                            +1
                            Есть подозрение, что это баг ))
                            +4
                            Надеюсь, ими не будут злоупотреблять до хабраката, скрывая в них кучу картинок и текста. Ведь грузится все это дело, как я понимаю, до раскрытия спойлера.
                              0
                              Картинки внутри невидимого блока, насколько знаю, не грузятся. А тексты — конечно.
                                +1
                                а по-моему картинки грузятся до открытия спойлера
                                  +2
                                  Сейчас посмотрел в firebug'e — картинка, вставленная Mithgol'ом в спойлер загрузилась до открытия.
                                    +1
                                    Да, очистив кеш Fx и перезагрузив, нашёл эту картинку в кеше (не открывая спойлер). Но это надо смотреть по всем браузерам. Помню, что где-то загружалось после открытия спойлера (на rutracker). Возможно, так должен быть устроен спойлер — не просто открывать скрытое, а прописывать текст в HTML только в момент открытия. Если так сделают, то и вопрос с RSS решится — спойлеры не будут вываливаться в ленты RSS.
                                0
                                Чуть менее года назад появился аддон Firefox (летом была новость какого-то автора) с подгрузкой статей после Хабраката, сейчас его функциональность встроена в HabrAjax. Спойлеры — это подобный функционал, но с подгрузкой данных немедленно.
                                  0
                                  А интересно, будет ли работать баг Хрома со скрытием видео в невидимый блок? (видео тогда появляется в (0,0)-позиции видимым на экране. Чтобы обойти эту проблему, я в HabrAjax смещал видео влево.
                                    0
                                    Я не стану проверять это обстоятельство, потому что не ставлю себе Google Chrome.
                                    –8
                                    Спойлеры. Новая штука. Ха-ха.

                                    Only users with full accounts can post comments. Log in, please.