РуСказки:Сворачиваемые блоки

Материал из Народные Сказки
Версия от 13:09, 8 октября 2023; ru>Andras
(разн.) ← Предыдущая версия | Текущая версия (разн.) | Следующая версия → (разн.)

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

Ограничения

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

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

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

Использование

Сворачивающиеся блоки обычно используются для навигационных шаблонов и скрытия больших кусков необязательного текста, то есть такой информации, которая заинтересует не всех читателей. ФСФС По возможности желательно не использовать код сворачивающихся div’ов и таблиц напрямую, а использовать уже существующие базовые шаблоны. Например, div’ы используются в

  • {{Скрытый блок}}
  • {{Начало скрытого блока}}…{{Конец скрытого блока}}

а сворачивающаяся таблица использована в

Также см. Категория:Шаблоны:Для навигационных шаблонов. Категория:Шаблоны:Сворачиваемые блоки

div

Для создания сворачивающегося div к нему добавляется класс NavFrame, при этом внутренний блок с классом NavHead образует всегда видимый заголовок, а любые внутренние блоки с классами NavContent и NavPic прячутся: 

<div class="NavFrame">
  <div class="NavHead">
    Заголовок
  </div>
  <div class="NavContent">
     Содержание
  </div>
  <div class="NavPic">
     Изображение
  </div>
</div>
Заголовок
Изображение
Содержание

NavFrame создавался в основном для навигационных шаблонов, поэтому используемые в этом блоке классы имеют несколько CSS правил в MediaWiki:Common.css. При необходимости можно задать свои стили прямо в викикоде страницы.

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

Таблица

Для того, чтобы сделать таблицу сворачивающейся, нужно добавить ей класс collapsible, при этом в первую заголовочную ячейку («!» в викикоде) первой строки добавляется переключатель [скрыть], прячущий все остальные строки: 

{| class="standard collapsible"
!colspan=3|Заголовок
|-
|Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
|-
|Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
|}
Заголовок
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2 
{| class="collapsible"
|Заголовок 1
|Заголовок 2
!Заголовок 3
|-
|}

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

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

collapsible таблица не имеет CSS в Common.css и в этом смысле является более универсальной, чем div.NavFrame. Для сокрытия произвольного содержимого можно использовать таблицу с одной заголовочной и одной обычной ячейкой.

Таблица может быть любого класса — wikitable, standard, wide: 

{| class="standard collapsible"

Таблица может быть сразу свёрнута: 

{| class="standard collapsible collapsed"

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

Начальное состояние

Начальное состояние сворачивающегося блока или сворачивающейся таблицы (сразу после загрузки страницы) можно изменить с помощью одного из трёх дополнительных классов:

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

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

Пример: 

<div class="NavFrame collapsed">
  <div class="NavHead">Свёрнутый</div>
  <div class="NavContent">
     по умолчанию блок
  </div>
</div>

Класс mw-collapsible

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

1. Простой пример
Добавление класса "mw-collapsible" к элементу делает его содержимое сворачивающимся.

<div class="mw-collapsible" style="width:400px">
Это сворачивающийся текст.<br>
Продолжение сворачивающегося текста.
</div>

Результат

Это сворачивающийся текст.
Продолжение сворачивающегося текста.

2. Небольшое изменение
Чтобы метка-переключатель не «проваливалась» вниз при сворачивании текста, к стилю сворачиваемого элемента необходимо добавить "overflow: hidden".

<div class="mw-collapsible" style="width:400px; overflow: hidden;">
Это сворачивающийся текст.<br>
Продолжение сворачивающегося текста.
</div>

Результат

Это сворачивающийся текст.
Продолжение сворачивающегося текста.

3. Начальное состояние
Добавление дополнительного класса "mw-collapsed" делает начальное состояние свернутым.

<div class="mw-collapsible mw-collapsed" style="width:400px; overflow: hidden;">
Это сворачивающийся текст,<br>
свернутый в начальном состоянии.
</div>

Результат

Это сворачивающийся текст,
свернутый в начальном состоянии.

4. Использование с таблицами
При использовании с таблицами заголовок таблицы будет всегда виден, а сворачиваться будут только строки. Осторожно с использованием в статьях, такая таблица не развернётся на печати в pdf.

{| class="mw-collapsible mw-collapsed wikitable"
! Заголовок таблицы || остаётся видимым
|-
| А строки таблицы || в начальном
|-
| состоянии || свернуты
|}

Результат

Заголовок таблицы остаётся видимым
А строки таблицы в начальном
состоянии свернуты

5. Частично сворачивающееся содержимое
Можно также определить, какая часть текста сворачивающаяся, а какая нет, используя класс "mw-collapsible-content". В следующем примере метка-переключатель будет присоединена к элементу "mw-collapsible", содержащий элемент "mw-collapsible-content", но действие метки-переключателя будет распространяться только на внутренний элемент.

<div class="mw-collapsible mw-collapsed" style="width:400px">
Этот текст не сворачивающийся.
<div class="mw-collapsible-content">А этот сворачивающийся.</div>
</div>

Результат

Этот текст не сворачивающийся.

А этот сворачивающийся.

6. Переопределение текста метки-переключателя
Используя атрибуты data-expandtext и data-collapsetext можно переопределить текст метки-переключателя.

<div class="mw-collapsible mw-collapsed" style="width:400px" data-expandtext="Показать" data-collapsetext="Скрыть">
Текст метки-переключателя переопределен.
<div class="mw-collapsible-content">А это сворачивающийся текст.</div>
</div>

Результат

Текст метки-переключателя переопределен.

А это сворачивающийся текст.

7. Создание отдельной метки-переключателя
Если вы не хотите, чтобы метка-переключатель создавалась по умолчанию, можно создать собственную метку-переключатель. Она может располагаться как внутри так и вне сворачивающегося элемента. Метка-переключатель связывается со сворачивающимся элементом при помощи использования класса с префиксом 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>

Результат

Это переключатель для сворачивания текста
Это сворачивающийся текст.
Это тоже переключатель для сворачивания текста!

8. Связывание одной метки-переключателя с несколькими элементами
Допустимо сворачивать несколько элементов одновременно при помоши одной метки-переключателя. Кроме того, поскольку класс "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
| ... || ...
|}

Результат
Площадь материков и государств.

[Показать/скрыть подробности]
Название Площадь, кв км
Северная Америка 24 250 000
Канада 9 984 670
США 9 519 431
... ...
Южная Америка 17 840 000
Бразилия 8 514 877
Аргентина 2 780 400
... ...
... ...

Персональные настройки

Зарегистрированные участники могут изменять для себя некоторые настройки сворачиваемых div’ов и таблиц, изменяя значения следующих параметров у себя в monobook.js (указаны значения по умолчанию): 

NavigationBarShowDefault = 1 //максимальное количество автосворачиваемых блоков 
 //(div'ы и таблицы считаются отдельно), после которого они будут изначально свёрнуты
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.

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

См. также

Источник — http://ru.ru-skazki.ru/index.php?title=РуСказки:Сворачиваемые_блоки&oldid=15558