Википедия:Сворачиваемые блоки
Сворачивающиеся блоки дают возможность динамически «прятать» своё содержимое (с помощью JavaScript в браузере посетителя), оставляя только заголовок. Сворачивающиеся блоки обычно используются для навигационных шаблонов и скрытия больших кусков необязательного текста, то есть такой информации, которая заинтересует не всех читателей.
Класс mw-collapsible[править код]
Класс "mw-collapsible
" может быть присвоен практически к любому блочному элементу (div, list, таблицы, строки и ячейки таблицы, и т. д.).
Простой пример[править код]
Добавление класса "mw-collapsible
" к элементу делает его содержимое сворачивающимся.
<div class="mw-collapsible" style="width:400px"> Это сворачивающийся текст.<br> Продолжение сворачивающегося текста. </div> |
Это сворачивающийся текст. |
Небольшое изменение[править код]
Чтобы метка-переключатель не «проваливалась» вниз при сворачивании текста, к стилю сворачиваемого элемента необходимо добавить "overflow: hidden
".
<div class="mw-collapsible" style="width:400px; overflow: hidden;"> Это сворачивающийся текст.<br> Продолжение сворачивающегося текста. </div> |
|
Начальное состояние[править код]
Блок может быть сразу свёрнут. Добавление дополнительного класса "mw-collapsed
" делает начальное состояние свернутым.
<div class="mw-collapsible mw-collapsed" style="width:400px; overflow: hidden;"> Это сворачивающийся текст,<br> свернутый в начальном состоянии. </div> |
|
Использование с таблицами[править код]
Для того, чтобы сделать таблицу сворачивающейся, нужно добавить ей класс mw-collapsible, при этом в последнюю заголовочную ячейку («!» в викикоде) первой строки добавляется переключатель [скрыть], прячущий все остальные строки. При использовании с таблицами заголовок таблицы будет всегда виден, а сворачиваться будут только строки. Таблица может быть любого класса — standard, wikitable, wide: {| class="standard mw-collapsible"
. Таблица может быть сразу свёрнута: {| class="standard mw-collapsible mw-collapsed"
. Следует быть осторожным с использованием данного механизма в статьях, так как такая таблица не развернётся на печати в pdf.
{| class="standard mw-collapsible mw-collapsed" ! Заголовок || таблицы || остаётся || видимым |- | А строки || таблицы || в || начальном |- | состоянии || свернуты || || |} |
|
Заголовок таблицы из одной ячейки[править код]
Некоторые шаблоны (пример) оставляют последнюю ячейку в первой строке заголовочной. Но как правило переключатель в правой части таблицы выглядит не очень красиво, поэтому обычно первую строку делают состоящей из одной ячейки.
{| class="standard mw-collapsible" !colspan=3|Заголовок |- |Ячейка 1*1||Ячейка 2*1||Ячейка 3*1 |- |Ячейка 1*2||Ячейка 2*2||Ячейка 3*2 |} |
|
Таблица может иметь несколько строк заголовков. Например, первая строка-заголовок может сворачиваться, а в следующей быть сортировка.
Частично сворачивающееся содержимое[править код]
Можно также определить, какая часть текста сворачивающаяся, а какая нет, используя класс "mw-collapsible-content
". В следующем примере метка-переключатель будет присоединена к элементу "mw-collapsible
", содержащий элемент "mw-collapsible-content
", но действие метки-переключателя будет распространяться только на внутренний элемент.
<div class="mw-collapsible mw-collapsed" style="width:400px"> Этот текст не сворачивающийся. <div class="mw-collapsible-content">А этот сворачивающийся.</div> </div> |
Этот текст не сворачивающийся. А этот сворачивающийся.
|
Переопределение текста метки-переключателя[править код]
Используя атрибуты data-expandtext
и data-collapsetext
можно переопределить текст метки-переключателя.
<div class="mw-collapsible mw-collapsed" style="width:400px" data-expandtext="Показать!!!" data-collapsetext="Скрыть!!!"> Текст метки-переключателя переопределен. <div class="mw-collapsible-content">А это сворачивающийся текст.</div> </div> |
Текст метки-переключателя переопределен. А это сворачивающийся текст.
|
Создание отдельной метки-переключателя[править код]
Если вы не хотите, чтобы метка-переключатель создавалась по умолчанию, можно создать собственную метку-переключатель. Она может располагаться как внутри так и вне сворачивающегося элемента. Метка-переключатель связывается со сворачивающимся элементом при помощи использования класса с префиксом mw-customtoggle
для метки-переключателя и атрибута ID с префиксом mw-customcollapsible
для соответствующего сворачивающегося элемента.
<div class="mw-customtoggle-myDiv1" style="background:#e0e8ff">Это переключатель для сворачивания текста</div> <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDiv1"> <div class="mw-collapsible-content">Это сворачивающийся текст.</div> </div> <div class="mw-customtoggle-myDiv1" style="background:#e8ffe0">Это тоже переключатель для сворачивания текста!</div> |
Это переключатель для сворачивания текста
Это сворачивающийся текст.
Это тоже переключатель для сворачивания текста!
|
Связывание одной метки-переключателя с несколькими элементами[править код]
Допустимо сворачивать несколько элементов одновременно при помоши одной метки-переключателя. Кроме того, поскольку класс "mw-collapsible
", обеспечивающий сворачиваемость, может быть присвоен любому типу элементов, в частности строкам таблицы, то эта возможность позволяет компактно отображать длинные таблицы с группировкой подитогов и возможностью развернуть детали одновременно по всем подитогам.
Площадь материков и государств. <div class="mw-customtoggle-myDiv2" style="color:#0B0080;"><small>[Показать/скрыть подробности]</small></div> {| class="wikitable" |- bgcolor=lightgreen | Название || Площадь, кв км |- bgcolor=lightblue | Северная Америка || 24 250 000 |- class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDiv2" | Канада || 9 984 670 |- class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDiv2" | США || 9 519 431 |- class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDiv2" | ... || ... |- bgcolor=lightblue | Южная Америка || 17 840 000 |- class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDiv2" | Бразилия || 8 514 877 |- class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDiv2" | Аргентина || 2 780 400 |- class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDiv2" | ... || ... |- bgcolor=lightblue | ... || ... |} |
Площадь материков и государств. [Показать/скрыть подробности]
|
Класс "NavFrame
" является устаревшим способом использования сворачиваемых блоков. Класс "NavFrame
" может быть присвоен блочному элементу div. Для создания сворачивающегося блока div к нему добавляется класс NavFrame, при этом внутренний блок с классом NavHead образует всегда видимый заголовок, а любые внутренние блоки с классами NavContent (содержимое) и NavPic (изображения) прячутся. Начальное состояние сворачивающегося блока (сразу после загрузки страницы) можно изменить с помощью одного из трёх дополнительных классов:
- collapsed означает, что блок будет свёрнут
- expanded означает, что блок будет развёрнут
- autocollapse: все блоки с этим классом будут свёрнуты, только если общее количество сворачивающихся блоков этого типа (сворачиваемые блоки и сворачиваемые таблицы считаются отдельно) на странице больше одного.
Если дополнительные классы не указаны, то по умолчанию сворачиваемые блоки имеют состояние autocollapse
.
<div class="NavFrame collapsed"> <div class="NavHead">Заголовок</div> <div class="NavContent"> Свёрнутый по умолчанию блок </div> <div class="NavPic"> Свёрнутое по умолчанию изображение </div> </div> |
Заголовок
Свёрнутый по умолчанию блок Свёрнутое по умолчанию изображение |
Рекомендации по использованию[править код]
Ограничения[править код]
Имейте в виду, что обычно любые свёрнутые блоки/таблицы отобразятся раскрытыми (даже при указанном collapsed) в «Создать книгу», «Скачать как PDF», «Версия для печати» и мобильной версии.
В мобильной версии не работает сворачивание/разворачивание (JS) блоков. Если в коде какого-нибудь шаблона скрытую часть дополнить display:none
, то без JS display не изменится и содержание блока вообще не покажется.
В навигационные шаблоны добавляется класс navbox и он исключается из экспорта/печати в MediaWiki:Print.css, также они не показываются в мобильной версии.
Использование[править код]
По возможности желательно не использовать код сворачивающихся блоков и таблиц напрямую, а использовать уже существующие базовые шаблоны. Например, сворачивающиеся блоки используются в
- {{Скрытый блок}}
- {{Начало скрытого блока}}…{{Конец скрытого блока}}
- и в других базовых сворачиваемых шаблонах: Категория:Шаблоны:Сворачиваемые блоки
а сворачивающиеся таблицы используются в
- {{Навигационная таблица}}
- {{Навигационная полоса}}
- и в других базовых навигационных шаблонах: Категория:Шаблоны:Для навигационных шаблонов
Персональные настройки[править код]
Зарегистрированные участники могут изменять для себя некоторые настройки сворачиваемых блоков и таблиц, изменяя значения следующих параметров у себя в monobook.js (указаны значения по умолчанию):
NavigationBarShowDefault = 1 //максимальное количество автосворачиваемых блоков
//(сворачиваемые блоки и сворачиваемые таблицы считаются отдельно), после которого они будут изначально свёрнуты
var NavigationBarHide = '[скрыть]' //ссылка-переключатель на развёрнутом блоке
var NavigationBarShow = '[показать]' //ссылка-переключатель на свёрнутом блоке
Технические детали[править код]
Механизм «сворачивания» реализуется JavaScript-кодом в MediaWiki:Common.js, работающим во всех современных браузерах, включая IE 5.5+, Firefox, Chrome/Safari/KHTML, Opera 8+. Посетители, отключившие в браузере поддержку JavaScript, будут видеть эти блоки в развёрнутом виде без ссылок спрятать/показать.
JavaScript-код был скопирован из en:Mediawiki:Common.js и затем переработан. Основные отличия:
- добавлен класс expanded для div’ов;
- у таблиц скобки являются частью ссылки «[скрыть]», как и у div'ов.
Также см. en:Wikipedia:NavFrame и en:Help:Collapsing.
Наведя мышь на ссылку показать/скрыть и видя адрес ссылки, можно определить, какого типа сворачивающийся блок используется.