Příručka:Skládací prvky

This page is a translated version of the page Manual:Collapsible elements and the translation is 100% complete.
MediaWiki nabízí skládací třídy pro MediaWiki 1.18 a vyšší. Starší verze komunity viz tato revize.

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
|}
Popisek
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:

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í ||
|}
Titulek zůstane viditelný.
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ý.
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:

Tento text je sbalitelný. 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.

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:

Vzorek Lorem ipsum
Tento text je sbalitelný. 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.

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ý:

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.

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

Tato metoda je pro uživatele screenreaderů nepřístupná a matoucí. Vyhněte se jejímu používání

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

přepínaný text

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.

Moje tabulka se skládacími informacemi
Název Ukázka
Lorem Ipsum
Více informací
Číslo Písmeno  
1 A
2 B
3 C

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;
}

Související odkazy