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

Материал из Википедии — свободной энциклопедии

ВП:СБ

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

[править] Использование

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

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

• {{Навигационная полоса}}
• {{hider}}

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

• {{Навигационная таблица}}

Также см. Категория:Википедия:Навигационные шаблоны для шаблонов.

[править] DIV

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

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

Как правило, используется один NavContent для основного содержимого, и от нуля до двух NavPic для изображений.

Стандартный внешний вид всех этих классов задаётся в MediaWiki:Common.css. Для смены оформления можно указать дополнительные CSS стили прямо в викикоде. В частности, поскольку у NavPic задан стиль «плавать слева», для добавления второго изображения справа нужно использовать <div class="NavPic" style="float:right">

[править] Таблица

Для того, чтобы сделать любую таблицу сворачивающейся, достаточно добавить к ней класс collapsible:

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

Первую строку (заголовок) обычно делают состоящей из одной ячейки (<TH>).

[править] Начальное состояние

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

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

Если дополнительных классов не указано, то считается, что у таблицы класс expanded, а у div'а autocollapsed.

Пример:

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

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

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

autoCollapse = 2 //максимальное количество сворачиваемых таблиц на странице, 
 //после которого все из них с классом autocollapse будут изначально свёрнуты
NavigationBarShowDefault = 2 //максимальное количество сворачиваемых div на странице, 
 //после которого все из них без класса expanded будут изначально свёрнуты
collapseCaption = 'скрыть' //ссылка-переключатель на развёрнутом блоке
expandCaption = 'показать' //ссылка-переключатель на свёрнутом блоке

[править] Технические детали

Механизм «сворачивания» реализуется JavaScript кодом в MediaWiki:Common.js. Этот код работает во всех современных браузерах, включая IE5.5/6/7, Firefox, Safari / KHTML, Opera 8/9. Посетители, отключившие в браузере поддержку JavaScript, будут видеть эти блоки в развёрнутом виде без ссылок спрятать/показать.

JavaScript код был скопирован из en:Mediawiki:Common.js с небольшими модификациями. Так, в английской Википедии у div'ов нет классов collapsed и expanded, зато код проверяет, не спрятан ли div изначально автором с помощью style="display:none". Такой подход имеет очевидный недостаток: посетители с выключенным JavaScript вообще не смогут увидеть содержимого спрятанных блоков (не заглядывая в HTML код страницы).

В настоящий момент можно легко распознать какой вид блока используется: у <div>'ов квадратные кавычки [] являются частью ссылки «показать/скрыть», а у таблиц — нет.

[править] См.также

• Википедия:Глобальный код