Příručka:Skládací prvky
jQuery.makeCollapsible
- Další informace o tom, jak to funguje, najdete také v dokumentaci jQuery.makeCollapsible.
- Viz také: Manual:Collapsible elements/Demo/Advanced pro další příklady.
Tento modul je standardně v jádru MediaWiki od MediaWiki 1.18 a vyšší. Tento modul je standardně dodáván s MediaWiki. Nemusíte to kopírovat na wiki. Zdroj (pokud vás to zajímá) je v úložišti mediawiki-core (resources/src/jquery/jquery.makeCollapsible.js a resources/src/jquery/jquery.makeCollapsible.css).
Přidejte třídu mw-collapsible k libovolnému prvku (div, tabulka, seznam, cokoli), abyste ji spustili.
Nefunguje na Skin:Minerva Neue (phab:T111565).
Upozorňujeme, že integrované vyhledávání prohlížečů nenajde obsah ve sbalených prvcích (phab:T327893).
Tabulka
Tabulku lze sbalit jako jakýkoli jiný prvek. Rozdíl je v tom, že část tabulky zůstává viditelná, i když je složená. Tabulka s titulkem udržuje titulek viditelný:
{| class="mw-collapsible"
|+ Popisek
|-
! scope="col" | Hlavička 1
! scope="col" | Hlavička 2
|-
| Data 1
| Data 2
|}
| Hlavička 1 | Hlavička 2 |
|---|---|
| Data 1 | Data 2 |
Tabulka bez titulku udržuje první řádek viditelný:
{| role="presentation" class="mw-collapsible"
|-
| Lorem
| ipsum  
|-
| dolor
| sit
|}
Výsledek:
| Lorem | ipsum |
| dolor | sit |
Se zadaným počátečním stavem
Můžete přidat mw-collapsed za mw-collapsible, aby se obsah při načítání stránky ve výchozím nastavení sbalil.
Chcete-li nastavit počáteční stav jako sbalený, přidejte "mw-collapsed", jak je vidět v následující tabulce:
{| class="mw-collapsible mw-collapsed wikitable"
! colspan="2" | Záhlaví zůstává viditelné.  
|-
| Tento obsah || je skrytý
|-
| při prvním načtení ||
|}
| Záhlaví zůstává viditelné. | |
|---|---|
| Tento obsah | je skrytý |
| při prvním načtení | |
{| class="mw-collapsible mw-collapsed wikitable"
|+ style=white-space:nowrap | Titulek zůstane viditelný.
|-
! SMS !! další text
|-
| Tento obsah || je skrytý
|-
| při prvním načtení ||
|}
| SMS | další text |
|---|---|
| Tento obsah | je skrytý |
| při prvním načtení |
Můžete přidat podložený okraj kolem titulku, aby bylo snazší vidět, že jde o sbalenou tabulku:
|+ style="white-space:nowrap; border:1px solid; padding:3px;" | Titulek zůstane viditelný.
| SMS | další text |
|---|---|
| Tento obsah | je skrytý |
| při prvním načtení |
Prosté
<!-- overflow:auto; opraví sbalený displej, protože přepínací odkaz má float:right; -->
<div class="toccolours mw-collapsible" style="width:400px; overflow:auto;">
Tento text je sbalitelný. {{Lorem}}
</div>
Výsledek:
Pomocí atributů data-collapsetext a data-expandtext lze definovat vlastní text pro popisky přepínačů přidané skriptem.
Když jsou přidány do wikitextu, mohou být vyplněny lokalizovanou zprávou jako:
<div class="mw-collapsible" data-expandtext="{{int:show}}" data-collapsetext="{{int:hide}}">
Prosté s názvem
<div class="toccolours mw-collapsible" style="width:400px; overflow:auto;">
<div style="font-weight:bold;line-height:1.6;">Vzorek Lorem ipsum</div>
<div class="mw-collapsible-content">
Tento text je sbalitelný. {{Lorem}}
</div></div>
Výsledek:
Se specifikovanou skládací částí
Ve výchozím nastavení se sbalitelný netabulkový prvek zcela sbalí.
Chcete-li, aby byl určitý obsah viditelný, i když je sbalený, můžete určit, která část je sbalitelným obsahem.
<div class="toccolours mw-collapsible mw-collapsed">
Tento text nelze sbalit, ale další je ve výchozím nastavení skládací a skrytý:
<div class="mw-collapsible-content">{{Lorem}}</div>
</div>
Výsledek:
Tento text nelze sbalit; ale následující je ve výchozím nastavení skládací a skrytý:
Umístění vlastního přepínacího odkazu
| Verze MediaWiki: | ≥ 1.41 |
Můžete řídit, kam uvnitř skládacího prvku se přepínací odkaz dostane umístěním prvku s třídou mw-collapsible-toggle-placeholder uvnitř.
Zástupný symbol bude zcela nahrazen standardním přepínacím odkazem na přesné pozici v DOM, kam jste zástupný symbol vložili.
Příklad viz pokročilé demo.
Budete to chtít zkombinovat se zadanou sbalitelnou částí (viz nahoře) a umístit zástupný symbol mimo prvek mw-collapsible-content, abyste zajistili, že přepínač bude stále dosažitelný ve sbaleném stavu.
S vlastním přepínacím odkazem
Pokud nechcete, aby skript do vašeho prvku vložil výchozí přepínací odkaz (ať už s vlastním štítkem, nebo ne), můžete si vytvořit vlastní.
To by se mohlo nacházet kdekoli uvnitř nebo mimo skládací prvek.
Jeho vztah ke skládacímu prvku je detekován pomocí atributu ID s předponou mw-customcollapsible a odpovídajícího atributu třídy s předponou mw-customtoggle pro sbalitelný prvek a togglelink.
<span class="mw-customtoggle-myDivision">přepínací odkaz</span>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision">přepínaný text</div>
<span class="mw-customtoggle-myDivision">další přepínací odkaz</span>
Výsledek:
přepínací odkaz
další přepínací odkaz
Uvnitř jiného prvku
Skládací prvky můžete použít i v jiných prvcích, jako je například tabulka.
| Název | Ukázka | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Lorem | Ipsum | ||||||||
| Více informací |
|
Přesunutí přepínacího odkazu doleva
Široké obrázky a dlouhé holé adresy URL ve sbalitelných tabulkách nebo prvcích mohou způsobit, že se přepínací odkaz po rozbalení přesune mimo obrazovku doprava. Například v mobilních telefonech. Někdy je obtížné nebo nemožné přejít na přepínací odkaz, kliknout na něj a zavřít jej. Následující CSS umístí přepínací odkaz úplně doleva a ponechává mezi ním a textem napravo malý prostor. Pozice přepínacího odkazu se při rozbalení nebo sbalení tabulky nebo prvku nemění. Umístěte CSS do common.css úpravou stránky "MediaWiki:Common.css". Upravte také mobile.css, pokud importujete jquery.makeCollapsible do mobile.js. Příklady viz common.css, mobile.js a mobile.css
/* Skládací prvky. Přepínací odkaz byl přesunut doleva.
/* Okraj kolem se upravil. */
.mw-collapsible span.mw-collapsible-toggle {
float:left;
margin-left:0;
margin-right:1em;
}
Odebrání závorek z přepínače
Pokud chcete skrýt závorky ve výchozích nebo vlastních přepínacích odkazech štítku (z estetických nebo jiných důvodů):
.mw-collapsible-toggle-default:before, .mw-collapsible-toggle-default:after {
display: none;
}