Набла:Сворачиваемые элементы
jQuery.makeCollapsible[]
Стандартным средством Mediawiki для работы со сворачиваемыми элементами является библиотека jQuery.makeCollapsible (общий обзор, в т. ч. по ранее использовавшимся средствам есть тут: mw:Manual:Collapsible elements).
Test suite for mw-collapsible[]
Здесь показаны возможности mw-collapsible на большом примере (Источник).
Сворачиваемый div[]
<div class="mw-collapsible" data-collapsetext="Свернется при нажатии" data-expandtext="Развернуть взад!">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Сворачиваемый div (свернут по умолчанию)[]
<div class="mw-collapsible mw-collapsed">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Сворачиваемый div внутри свернутого div[]
<div class="mw-collapsible mw-collapsed"> + <div class="mw-collapsible" style="background:#cbffc8">
Hi there this is text in the outer div.
This content is inside the nested collapsible div.
Сворачиваемая таблица[]
{| class="wikitable sortable mw-collapsible" data-collapsetext=" − " data-expandtext=" + "
| Hello | World |
|---|---|
| Content | Goes |
| In | Here |
Сворачиваемая таблица (свернута по умолчанию)[]
{| class="wikitable mw-collapsible mw-collapsed"
| Hello | World |
|---|---|
| Content | Goes |
| In | Here |
Сворачиваемая таблица в свернутом div[]
<div class="mw-collapsible mw-collapsed"> + {| class="wikitable sortable mw-collapsible"
Some text in the div here.
| Hello | World |
|---|---|
| Content | Goes |
| In | Here |
Some more text in the div.
Свернутая ячейка в таблице[]
<td class="mw-collapsible mw-collapsed">
| X | Y | Z |
|---|---|---|
| Hi, the content in the cell below me is collapsible and collapsed by default | 35 | 91 |
| I'm the mw-collapsible cell content! | 42 | 63 |
Сворачиваемый список[]
<ul class="mw-collapsible">
- Lorem
- Ipsum
- Dolor
Сворачиваемый нумерованный список[]
<ol class="mw-collapsible">
- One
- Two is more than one
- ..a total of three items!
Pre-made toggle 1[]
<div class="mw-collapsible">
<div style="float:left" class="mw-collapsible-toggle">{{Да|40px}}</div>
<div class="mw-collapsible-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Отдаленный сворачиваемый div с множественным управлением@[]
<sup class="mw-customtoggle-myDivision" style="color:orange">@</sup>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision">
<div class="toccolours mw-collapsible-content">
- @
Custom collapsible 2 (table)[]
<div class="usermessage mw-customtoggle-myTable">..</div>
{| class="wikitable sortable mw-collapsible" id="mw-customcollapsible-myTable"..|}
| Hello | World |
|---|---|
| Content | Goes |
| In | Here |
Custom collapsible 3 (list)[]
<div class="usermessage mw-customtoggle-myList">..</div>
<ul class="mw-collapsible" id="mw-customcollapsible-myList">..</ul>
- A
- B
- C
- D
Custom collapsible 4 (table-row)[]
<td><span class="mw-customtoggle-AA mw-customtoggle-BB mw-customtoggle-CC">..</td>
<tr id="mw-customcollapsible-AA" class="mw-collapsible mw-collapsed">..
| X | Y | Z |
|---|---|---|
| I'm the mw-customtoggle for A, B and C. Click me to toggle three table-rows at once! | 20 | 11 |
| I'm the mw-customcollapsible row A | 20 | 7 |
| I'm the mw-customcollapsible row B | 21 | 11 |
| I'm the mw-customcollapsible row C | 29 | 1 |
| This is just a plain table cell | 0 | 30 |
Combination example[]
- Table is collapsed by default
- Second row contains collapsible list
- Third row contains a collapsible block with custom labels
| Collapse Набла:Сворачиваемые элементы | ||
|---|---|---|
| #1 |
Hello, edit this page Hello, purge this page Hello, add new section to talkpage |
|
| #2 |
|
|
| #3 |
There's a lot more secret content hidden ! This following code is top secret:
|
|
| Last edited by NablaSysop on 20210511153840 | ||
| Permalink to this revision | ||
Пример dismissible[]
Надстройки в Набле[]
Средства Bootstrap[]
При использовании скина Chameleon можно использовать возможности библиотеки Bootstrap.
Произвольный селектор управляемых элементов@[]
Наряду с «collapse» и «collapse in» есть еще «collapsing» (примера нет).
<sup data-toggle="collapse" data-target=".boots-test" style="color:orange">@</sup>
<div class="collapse boots-test">
<div class="collapse in boots-test">
- @
Тексты, не соответствующие селектору, никак не участвуют.
| a | b | с |
|---|---|---|
| x | скрытая строка | y |
| u | скрытая ячейка | v |
Тексты, не соответствующие селектору, никак не участвуют.
| a | b | с |
|---|---|---|
| x | скрытая строка | y |
| u | ячейка c инверсным сокрытием | v |
