Википедия:Сворачивающиеся блоки

Материал из Википедии — свободной энциклопедии
Перейти к: навигация, поиск
↱ ВП:СБ

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

Использование[править | править исходный текст]

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

По возможности желательно не использовать код сворачивающихся 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. Для сокрытия произвольного содержимого можно использовать таблицу с одной заголовочной и одной обычной ячейкой.

Начальное состояние[править | править исходный текст]

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

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

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

Пример:

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

Персональные настройки[править | править исходный текст]

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

NavigationBarShowDefault = 2 //максимальное количество автосворачиваемых блоков 
 //(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

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

См. также[править | править исходный текст]