ru>Andras в 10:09, 8 октября 2023

2023-10-08T10:09:28Z

Новая страница

'''Сворачивающиеся (сворачиваемые) блоки''' дают возможность динамически «прятать» своё содержимое (с помощью JavaScript в браузере посетителя), оставляя только заголовок. Существует три вида блоков: div’ы, таблицы и универсальный механизм использования класса mw-collapsible.

== Ограничения ==
Имейте в виду, что обычно любые свёрнутые блоки/таблицы отобразятся раскрытыми (даже при указанном collapsed) в «Создать книгу», «Скачать как PDF», «Версия для печати» и мобильной версии.

В мобильной версии не работает сворачивание/разворачивание (JS) блоков. Если в коде какого-нибудь шаблона скрытую часть дополнить <code><nowiki>display:none</nowiki></code> то без JS display не изменится и содержание блока вообще не покажется.

В навигационные шаблоны добавляется класс navbox и он исключается из экспорта/печати в [[MediaWiki:Print.css]], также они не показываются в мобильной версии.

== Использование ==
Сворачивающиеся блоки обычно используются для навигационных шаблонов и скрытия больших кусков необязательного текста, то есть такой информации, которая заинтересует не всех читателей.
ФСФС
По возможности желательно не использовать код сворачивающихся div’ов и таблиц напрямую, а использовать уже существующие базовые шаблоны. Например, div’ы используются в
* {{Tl|Скрытый блок}}
* {{Tl|Начало скрытого блока}}…{{Tl|Конец скрытого блока}}
а сворачивающаяся таблица использована в
* {{Tl|Навигационная таблица}}
* {{Tl|Навигационная полоса}}
Также см. [[:Категория:Шаблоны:Для навигационных шаблонов]]. [[:Категория:Шаблоны:Сворачиваемые блоки]]

== div ==
Для создания сворачивающегося <tt>div</tt> к нему добавляется класс <tt>''NavFrame''</tt>, при этом внутренний блок с классом <tt>NavHead</tt> образует всегда видимый заголовок, а любые внутренние блоки с классами <tt>NavContent</tt> и <tt>NavPic</tt> прячутся:
{| style="background-color:transparent; width:100%"
|style="padding-right:20px; width:45%"|
<source lang="html4strict">
<div class="NavFrame">
<div class="NavHead">
Заголовок
</div>
<div class="NavContent">
Содержание
</div>
<div class="NavPic">
Изображение
</div>
</div></source>
|valign=top|<br />
<div class="NavFrame">
<div class="NavHead">Заголовок</div>
<div class="NavPic">Изображение</div>
<div class="NavContent">Содержание<br/><br/>
</div>
</div>
|}
NavFrame создавался в основном для навигационных шаблонов, поэтому используемые в этом блоке классы имеют несколько CSS правил в [[MediaWiki:Common.css]]. При необходимости можно задать свои стили прямо в викикоде страницы.

Количество блоков содержимого неограничено, но обычно используется один <tt>NavContent</tt> для основного содержимого и до двух <tt>NavPic</tt>. Поскольку в Common.css у <tt>NavPic</tt> задан стиль «плавать слева», для добавления второго изображения справа нужно использовать <code><div class="NavPic" style="float:right"></code>.

== Таблица ==
Для того, чтобы сделать таблицу сворачивающейся, нужно добавить ей класс ''collapsible'', при этом в первую заголовочную ячейку («!» в викикоде) первой строки добавляется переключатель <small>[скрыть]</small>, прячущий все остальные строки:
{| style="background-color:transparent; width:100%"
|style="padding-right:20px; width:45%"|
<pre>{| class="standard collapsible"
!colspan=3|Заголовок
|-
|Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
|-
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
|}</pre>
|valign=top|<br>
{| class="standard collapsible" style="width:500px"
!colspan=3|Заголовок
|-
|Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
|-
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
|}
|}

<pre style="float:right; margin-left:1em; font-size:smaller">
{| class="collapsible"
|Заголовок 1
|Заголовок 2
!Заголовок 3
|-
|}</pre>
Поскольку переключатель в левой части таблицы выглядит не очень красиво, обычно первую строку делают состоящей из одной ячейки, как в примере выше.

Некоторые шаблоны ([[Шаблон:Footballbox collapsible|пример]]) делают только последнюю ячейку в первой строке заголовочной, как в примере справа.

<code>collapsible</code> таблица не имеет CSS в Common.css и в этом смысле является более универсальной, чем div.NavFrame. Для сокрытия произвольного содержимого можно использовать таблицу с одной заголовочной и одной обычной ячейкой.
<br style="clear:both">

Таблица может быть любого класса — wikitable, standard, wide:
<nowiki>{| class="standard collapsible"</nowiki>
Таблица может быть сразу свёрнута:
<nowiki>{| class="standard collapsible collapsed"</nowiki>

Таблица может иметь несколько строк заголовков. [[Служебная:Изменения/68869486|Например]], первая строка-заголовок может сворачиваться, а в следующей быть сортировка.

== Начальное состояние ==
Начальное состояние сворачивающегося блока или сворачивающейся таблицы (сразу после загрузки страницы) можно изменить с помощью одного из трёх дополнительных классов:
* '''collapsed''' означает, что блок будет свёрнут
* '''expanded''' означает, что блок будет развёрнут
* '''autocollapse''': все блоки с этим классом будут свёрнуты, только если общее количество сворачивающихся блоков ''этого типа'' (div’ы и таблицы считаются отдельно) на странице больше одного.

Если дополнительные классы не указаны, то по умолчанию таблицы изначально развёрнуты (<code>expanded</code>), а div'ы имеют состояние <code>autocollapse</code>.

Пример:
{| style="background-color:transparent; width:100%"
|style="padding-right:20px; width:45%"|
<source lang="html4strict">
<div class="NavFrame collapsed">
<div class="NavHead">Свёрнутый</div>
<div class="NavContent">
по умолчанию блок
</div>
</div></source>
|valign=top|<br />
<div class="NavFrame collapsed">
<div class="NavHead">Свёрнутый</div>
<div class="NavContent">по умолчанию блок</div>
</div>
|}

== Класс mw-collapsible ==
Класс "<code>mw-collapsible</code>" более универсален, чем div.NavFrame и сворачивающиеся таблицы, так как он может быть присвоен практически к любому блочному элементу (div, list, таблицы, строки и ячейки таблицы, и т. д.).

'''1. Простой пример'''<br>
Добавление класса "<code>mw-collapsible</code>" к элементу делает его содержимое сворачивающимся.<br>
<syntaxhighlight lang="html4strict">
<div class="mw-collapsible" style="width:400px">
Это сворачивающийся текст.<br>
Продолжение сворачивающегося текста.
</div>
</syntaxhighlight>
<div style="border: 1px dashed;">
'''Результат'''
<div class="mw-collapsible" style="width: 400px">
Это сворачивающийся текст.<br>
Продолжение сворачивающегося текста.
</div>
</div>

'''2. Небольшое изменение'''<br>
Чтобы метка-переключатель не «проваливалась» вниз при сворачивании текста, к стилю сворачиваемого элемента необходимо добавить "<code>overflow: hidden</code>".<br>
<syntaxhighlight lang="html4strict">
<div class="mw-collapsible" style="width:400px; overflow: hidden;">
Это сворачивающийся текст.<br>
Продолжение сворачивающегося текста.
</div>
</syntaxhighlight>
<div style="border: 1px dashed;">
'''Результат'''
<div class="mw-collapsible" style="width: 400px; overflow: hidden;">
Это сворачивающийся текст.<br>
Продолжение сворачивающегося текста.
</div>
</div>

'''3. Начальное состояние'''<br>
Добавление дополнительного класса "<code>mw-collapsed</code>" делает начальное состояние свернутым.<br>
<syntaxhighlight lang="html4strict">
<div class="mw-collapsible mw-collapsed" style="width:400px; overflow: hidden;">
Это сворачивающийся текст,<br>
свернутый в начальном состоянии.
</div>
</syntaxhighlight>
<div style="border: 1px dashed;">
'''Результат'''
<div class="mw-collapsible mw-collapsed" style="width: 400px; overflow: hidden;">
Это сворачивающийся текст,<br>
свернутый в начальном состоянии.
</div>
</div>

'''4. Использование с таблицами'''<br>
При использовании с таблицами заголовок таблицы будет всегда виден, а сворачиваться будут только строки. Осторожно с использованием в статьях, такая таблица не развернётся на печати в pdf.<br>
<syntaxhighlight lang="html4strict">
{| class="mw-collapsible mw-collapsed wikitable"
! Заголовок таблицы || остаётся видимым
|-
| А строки таблицы || в начальном
|-
| состоянии || свернуты
|}
</syntaxhighlight>
<div style="border: 1px dashed;">
'''Результат'''
{| class="mw-collapsible mw-collapsed wikitable"
! Заголовок таблицы || остаётся видимым
|-
| А строки таблицы || в начальном
|-
| состоянии || свернуты
|}
</div>

'''5. Частично сворачивающееся содержимое'''<br>
Можно также определить, какая часть текста сворачивающаяся, а какая нет, используя класс "<code>mw-collapsible-content</code>". В следующем примере метка-переключатель будет присоединена к элементу "<code>mw-collapsible</code>", содержащий элемент "<code>mw-collapsible-content</code>", но действие метки-переключателя будет распространяться только на внутренний элемент.<br>
<syntaxhighlight lang="html4strict">
<div class="mw-collapsible mw-collapsed" style="width:400px">
Этот текст не сворачивающийся.
<div class="mw-collapsible-content">А этот сворачивающийся.</div>
</div>
</syntaxhighlight>
<div style="border: 1px dashed;">
'''Результат'''
<div class="mw-collapsible mw-collapsed" style="width:400px">
Этот текст не сворачивающийся.
<div class="mw-collapsible-content">А этот сворачивающийся.</div>
</div>
</div>

'''6. Переопределение текста метки-переключателя'''<br>
Используя атрибуты <code>data-expandtext</code> и <code>data-collapsetext</code> можно переопределить текст метки-переключателя.<br>
<syntaxhighlight lang="html4strict">
<div class="mw-collapsible mw-collapsed" style="width:400px" data-expandtext="Показать" data-collapsetext="Скрыть">
Текст метки-переключателя переопределен.
<div class="mw-collapsible-content">А это сворачивающийся текст.</div>
</div>
</syntaxhighlight>
<div style="border: 1px dashed;">
'''Результат'''
<div class="mw-collapsible mw-collapsed" style="width:400px" data-expandtext="Показать" data-collapsetext="Скрыть">
Текст метки-переключателя переопределен.
<div class="mw-collapsible-content">А это сворачивающийся текст.</div>
</div>
</div>

'''7. Создание отдельной метки-переключателя'''<br>
Если вы не хотите, чтобы метка-переключатель создавалась по умолчанию, можно создать собственную метку-переключатель. Она может располагаться как внутри так и вне сворачивающегося элемента. Метка-переключатель связывается со сворачивающимся элементом при помощи использования класса с префиксом <code>mw-customtoggle</code> для метки-переключателя и атрибута ID с префиксом <code>mw-customcollapsible</code> для соответствующего сворачивающегося элемента.<br>
<syntaxhighlight lang="html4strict">
<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>
</syntaxhighlight>
<div style="border: 1px dashed;">
'''Результат'''
<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>
</div>

'''8. Связывание одной метки-переключателя с несколькими элементами'''<br>
Допустимо сворачивать несколько элементов одновременно при помоши одной метки-переключателя. Кроме того, поскольку класс "<code>mw-collapsible</code>", обеспечивающий сворачиваемость, может быть присвоен любому типу элементов, в частности строкам таблицы, то эта возможность позволяет компактно отображать длинные таблицы с группировкой подитогов и возможностью развернуть детали одновременно по всем подитогам.<br>

<syntaxhighlight lang="html4strict">
Площадь материков и государств.
<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
| ... || ...
|}
</syntaxhighlight>
<div style="border: 1px dashed;">
'''Результат'''<br>
Площадь материков и государств.
<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
| ... || ...
|}
</div>

== Персональные настройки ==
Зарегистрированные участники могут изменять для себя некоторые настройки сворачиваемых div’ов и таблиц, изменяя значения следующих параметров у себя в [[Special:Mypage/monobook.js|monobook.js]] (указаны значения по умолчанию):
<source lang="javascript">
NavigationBarShowDefault = 1 //максимальное количество автосворачиваемых блоков
//(div'ы и таблицы считаются отдельно), после которого они будут изначально свёрнуты
var NavigationBarHide = '[скрыть]' //ссылка-переключатель на развёрнутом блоке
var NavigationBarShow = '[показать]' //ссылка-переключатель на свёрнутом блоке
</source>

== Технические детали ==
Механизм «сворачивания» реализуется JavaScript-кодом в [[MediaWiki:Common.js]], работающим во всех современных браузерах, включая IE 5.5+, Firefox, Chrome/Safari/KHTML, Opera 8+. Посетители, отключившие в браузере поддержку JavaScript, будут видеть эти блоки в развёрнутом виде без ссылок спрятать/показать.

JavaScript-код был скопирован из [[:en:Mediawiki:Common.js]] и затем переработан. Основные отличия:
* добавлен класс expanded для div’ов;
* у таблиц скобки являются частью ссылки «<u>[скрыть]</u>», как и у div'ов.
Также см. [[:en:Wikipedia:NavFrame]] и [[:en:Help:Collapsing]].

Наведя мышь на ссылку ''показать/скрыть'' и видя адрес ссылки, можно определить, какого типа сворачивающийся блок используется.

== См. также ==
* [[РуСказки:Таблицы]]
* [[РуСказки:Глобальный код]]
* [[:Категория:Шаблоны:Сворачиваемые блоки]]

[[Категория:РуСказки:Способы оформления статей|Блоки]]

РуСказки:Сворачиваемые блоки - История изменений

Импортёр: 1 версия импортирована

ru>Andras в 10:09, 8 октября 2023

← Предыдущая версия	Версия от 11:20, 2 мая 2024
(нет различий)