Справка:Табличный спойлер — различия между версиями

Материал из Энциклопедия вселенной Diablo
Перейти к: навигация, поиск
(Новая страница: «Категория:Справка»)
 
 
Строка 1: Строка 1:
 +
Чтобы сделать элемент сворачиваемым, нужно добавить в параметр class слово <code>collapsible</code>:
 +
 +
<nowiki>{| class="wikitable collapsible"
 +
!Заголовок
 +
|-
 +
|
 +
Основной текст
 +
|}</nowiki>
 +
=== Пример отображения===
 +
{| class="wikitable collapsible"
 +
!Заголовок
 +
|-
 +
|
 +
Основной текст
 +
|}
 +
 +
===Изначальное скрытие===
 +
Чтобы сделать элемент изначально свернутым, нужно добавить в параметр class, дополнительно к слову <code>collapsible</code>, слово:
 +
* '''autocollapse''': элемент будет изначально свернут, если на странице есть 2 и более элемента с параметром сворачивания.
 +
 +
* '''collapsed''': элемент будет изначально свернут в любом случае.
 +
 +
<nowiki>{| class="wikitable collapsible collapsed"
 +
!Заголовок
 +
|-
 +
|
 +
Изначально скрытый основной текст
 +
|}</nowiki>
 +
 +
=== Пример отображения===
 +
{| class="wikitable collapsible collapsed"
 +
!Заголовок
 +
|-
 +
|
 +
Изначально скрытый основной текст
 +
|}
 +
 +
===Ширина элемента===
 +
Так как обычно ширина заголовка меньше, чем основного текста, то ширина элемента будет «прыгать» при его показе/скрытии. Если вы хотите задать постоянную ширину элемента добавить после параметра class, параметр <code>style="width:50%"</code> для установки ширины в процентном отношении. Так же использовать параметр em: <code>style="width:34em"</code>
 +
 +
<nowiki>{| class="collapsible wikitable" style="width:50%"
 +
! Заголовок, ширина элемента:50%
 +
|-
 +
|
 +
Основной текст? для того чтобы было видно как текст размещается на заданной длиннее этого элемента установленного на 50%
 +
|}</nowiki>
 +
 +
=== Пример отображения===
 +
{| class="collapsible wikitable" style="width:50%"
 +
! Заголовок, ширина элемента:50%
 +
|-
 +
|
 +
Основной текст, для того чтобы было видно, как текст размещается на заданной ширине этого элемента установленного на 50%
 +
|}
 +
 +
{| class="collapsible wikitable" style="width:34em"
 +
! Заголовок, ширина элемента:34em
 +
|-
 +
| Основной текст, для того чтобы было видно, как текст размещается на заданной ширине этого элемента, установленного на 34em
 +
|}
 +
 +
<includeonly>===Usage===
 +
 +
For content that is not a table one can create a table with only one element with content, and a header. However there's a table-less, purely DIV-based solution available on the Wikipedia - see [[#Collapsible DIV]] below.
 +
 +
 +
 +
For existing table one can simply add collapsible class. If the table has several colums, it might be a good idea to add a heading row consisting of one cell otherwise the link will be in the first one. Sometimes an easy solution is to put the whole table as element inside another table (see example below); however this is bad from the webdesign and usability viewpoint.</includeonly>
 +
 +
===Сортируемая скрываемая таблица===
 +
 +
Сортировка внутри скрываемой таблицы:
 +
 +
{| style="width:40em"
 +
! width=50% | изначально развернуто !! изначально свернуто
 +
|-
 +
|
 +
<nowiki>{| class="collapsible"
 +
!число
 +
|-
 +
|
 +
{| class="wikitable sortable"
 +
!название!!число
 +
|-
 +
|a||123
 +
|-
 +
|b||6
 +
|-
 +
|c||45
 +
|}
 +
|}</nowiki>
 +
||
 +
<nowiki>{|class="collapsible collapsed"
 +
!число
 +
|-
 +
|
 +
{|class="wikitable sortable"
 +
!название!!число
 +
|-
 +
|a||123
 +
|-
 +
|b||6
 +
|-
 +
|c||45
 +
|}
 +
|}</nowiki>
 +
|-
 +
|
 +
|}
 +
 +
==== Пример отображения====
 +
{| style="width:40em"
 +
|-
 +
|
 +
{| class="collapsible"
 +
!число
 +
|-
 +
|
 +
{| class="wikitable sortable"
 +
!название!!число
 +
|-
 +
|a||123
 +
|-
 +
|b||6
 +
|-
 +
|c||45
 +
|}
 +
|}
 +
||
 +
{|class="collapsible collapsed"
 +
!число
 +
|-
 +
|
 +
{|class="wikitable sortable"
 +
!название!!число
 +
|-
 +
|a||123
 +
|-
 +
|b||6
 +
|-
 +
|c||45
 +
|}
 +
|}
 +
|}
 +
 +
Для того чтобы кнопка скрыть/показать была внутри таблицы:
 +
 +
{| style="width:40em"
 +
!изначально развернуто !! изначально свернуто
 +
|-
 +
|
 +
<nowiki>{|class="wikitable sortable collapsible"
 +
!название!!число
 +
|-
 +
|a||123
 +
|-
 +
|b||6
 +
|-
 +
|c||45
 +
|}</nowiki>
 +
|
 +
<nowiki>{|class="wikitable sortable collapsible collapsed"
 +
!название!!число
 +
|-
 +
|a||123
 +
|-
 +
|b||6
 +
|-
 +
|c||45
 +
|}</nowiki>
 +
|}
 +
 +
==== Пример отображения====
 +
{| style="width:40em"
 +
|-
 +
|
 +
{|class="wikitable sortable collapsible"
 +
!название!!число
 +
|-
 +
|a||123
 +
|-
 +
|b||6
 +
|-
 +
|c||45
 +
|}
 +
|
 +
{|class="wikitable sortable collapsible collapsed"
 +
!название!!число
 +
|-
 +
|a||123
 +
|-
 +
|b||6
 +
|-
 +
|c||45
 +
|}
 +
|}
 +
 +
 +
__NOTOC__
 +
 
[[Категория:Справка]]
 
[[Категория:Справка]]

Текущая версия на 18:33, 6 декабря 2013

Чтобы сделать элемент сворачиваемым, нужно добавить в параметр class слово collapsible: 

{| class="wikitable collapsible"
 !Заголовок
 |-
 |
 Основной текст
 |}

Пример отображения

Заголовок

Основной текст

Изначальное скрытие

Чтобы сделать элемент изначально свернутым, нужно добавить в параметр class, дополнительно к слову collapsible, слово:

  • autocollapse: элемент будет изначально свернут, если на странице есть 2 и более элемента с параметром сворачивания.
  • collapsed: элемент будет изначально свернут в любом случае. 
{| class="wikitable collapsible collapsed"
 !Заголовок
 |-
 |
 Изначально скрытый основной текст
 |}

Пример отображения

Ширина элемента

Так как обычно ширина заголовка меньше, чем основного текста, то ширина элемента будет «прыгать» при его показе/скрытии. Если вы хотите задать постоянную ширину элемента добавить после параметра class, параметр style="width:50%" для установки ширины в процентном отношении. Так же использовать параметр em: style="width:34em" 

{| class="collapsible wikitable" style="width:50%"
 ! Заголовок, ширина элемента:50%
 |-
 | 
 Основной текст? для того чтобы было видно как текст размещается на заданной длиннее этого элемента установленного на 50%
 |}

Пример отображения

Заголовок, ширина элемента:50%

Основной текст, для того чтобы было видно, как текст размещается на заданной ширине этого элемента установленного на 50%

Заголовок, ширина элемента:34em
Основной текст, для того чтобы было видно, как текст размещается на заданной ширине этого элемента, установленного на 34em


Сортируемая скрываемая таблица

Сортировка внутри скрываемой таблицы:

изначально развернуто изначально свернуто 
{| class="collapsible"
 !число
 |-
 |
 {| class="wikitable sortable"
 !название!!число
 |-
 |a||123
 |-
 |b||6
 |-
 |c||45
 |}
 |} 

{|class="collapsible collapsed"
 !число
 |-
 |
 {|class="wikitable sortable"
 !название!!число
 |-
 |a||123
 |-
 |b||6
 |-
 |c||45
 |}
 |}

Пример отображения

число
название число
a 123
b 6
c 45

Для того чтобы кнопка скрыть/показать была внутри таблицы:

изначально развернуто изначально свернуто 
{|class="wikitable sortable collapsible"
 !название!!число
 |-
 |a||123
 |-
 |b||6
 |-
 |c||45
 |}

{|class="wikitable sortable collapsible collapsed"
 !название!!число
 |-
 |a||123
 |-
 |b||6
 |-
 |c||45
 |}

Пример отображения

название число
a 123
b 6
c 45
Источник — «http://diablopedia.ru/index.php?title=Справка:Табличный_спойлер&oldid=446»