Centrum Społeczności
m (+TR)
(Nie pokazano 1 wersji utworzonej przez jednego użytkownika)
Linia 1: Linia 1:
 
'''Zwijanie''' jest opcją do pokazywania (lub ukrywania) elementów HTML.
 
'''Zwijanie''' jest opcją do pokazywania (lub ukrywania) elementów HTML.
   
Kiedy strona zawiera wiele powiązanych ze sobą elementów, które sprawiają, że strona ta jest ​​bardzo długa, można uzyć zwijania, funkcja ta pozwala redaktorom na skrócenie strony i umożliwienie czytelnikom na rozwinięcie obszarów, które ich interesują. Podobnie do spisu treści, inne elementy wiki mogą być zaprojektowane do zwijania.
+
Kiedy strona zawiera wiele powiązanych ze sobą elementów, które sprawiają, że strona ta jest ​​bardzo długa, można użyć zwijania, funkcja ta pozwala redaktorom na skrócenie strony i umożliwienie czytelnikom na rozwinięcie obszarów, które ich interesują. Podobnie do spisu treści, inne elementy wiki mogą być zaprojektowane do zwijania.
   
Aby stworzyć zwijany element, wystarczy dodać do niego klasę "<code>mw-collapsible</code>".
+
Aby stworzyć zwijany element, wystarczy dodać do niego klasę <code>mw-collapsible</code>.
   
 
== Przykłady ==
 
== Przykłady ==
Linia 44: Linia 44:
 
== Zaawansowane ustawienia ==
 
== Zaawansowane ustawienia ==
 
=== Stan początkowy ===
 
=== Stan początkowy ===
Aby ustawić stan początkowy dla zwijanego elementu można się posłużyć klasą "<code>mw-collapsed</code>" oraz "<code>mw-collapsible</code>", przykład można ujrzeć poniżej:
+
Aby ustawić stan początkowy dla zwijanego elementu można się posłużyć klasą <code>mw-collapsed</code> oraz <code>mw-collapsible</code>, przykład można ujrzeć poniżej:
 
<pre>
 
<pre>
 
{| class="mw-collapsible mw-collapsed wikitable"
 
{| class="mw-collapsible mw-collapsed wikitable"
Linia 64: Linia 64:
   
 
=== Wybieranie zawartości zwijania ===
 
=== Wybieranie zawartości zwijania ===
Można również określić, która część zawartości może być zwijana używając "<code>mw-collapsible-content</code>".
+
Można również określić, która część zawartości może być zwijana używając <code>mw-collapsible-content</code>.
   
 
<source lang="html4strict" enclose="div">
 
<source lang="html4strict" enclose="div">
Linia 81: Linia 81:
   
 
=== Niestandardowe nazwy ===
 
=== Niestandardowe nazwy ===
Nie lubisz Rozwiń/Zwiń w linkach? Nie ma problemu! Zmień to używając "<code>data-expandtext</code>" i "<code>data-collapsetext</code>".
+
Nie lubisz Rozwiń/Zwiń w linkach? Nie ma problemu! Zmień to używając <code>data-expandtext</code> i <code>data-collapsetext</code>.
   
 
<pre>{| class="wikitable mw-collapsible" data-expandtext="Illuminati" data-collapsetext="Deluminati"
 
<pre>{| class="wikitable mw-collapsible" data-expandtext="Illuminati" data-collapsetext="Deluminati"
Linia 102: Linia 102:
 
Jeśli zauważysz na przykładzie powyższej tabeli, że link w drugiej kolumnie zwiększa szerokość tabeli w stosunku do tekstu zawartego w nim. Można ustalić, aby przełącznik był umieszczony w innym miejscu na stronie.
 
Jeśli zauważysz na przykładzie powyższej tabeli, że link w drugiej kolumnie zwiększa szerokość tabeli w stosunku do tekstu zawartego w nim. Można ustalić, aby przełącznik był umieszczony w innym miejscu na stronie.
   
Aby to zrobić musimy przypisać ID do elementu. To ID musi być poprzedzone prefiksem "<code>mw-customcollapsible-</code>", a następnie należy dodać unikalny tekst dla tego elementu. Korzystanie z powyższej tabeli, możemy dodać ID "<code>mw-customcollapsible-myTable</code>".
+
Aby to zrobić musimy przypisać ID do elementu. To ID musi być poprzedzone prefiksem <code>mw-customcollapsible-</code>, a następnie należy dodać unikalny tekst dla tego elementu. Korzystanie z powyższej tabeli, możemy dodać ID <code>mw-customcollapsible-myTable</code>.
   
Który zajmuje się samą tabelą. Następnie, możemy dodać przycisk/link/tekst z klasą "<code>mw-customtoggle-myTable</code>" (należy pamiętać, że '''class''' (klasa) i '''ID''' muszą mieć taki sam unikalny tekst).
+
Który zajmuje się samą tabelą. Następnie, możemy dodać przycisk/link/tekst z klasą <code>mw-customtoggle-myTable</code> (należy pamiętać, że '''class''' (klasa) i '''ID''' muszą mieć taki sam unikalny tekst).
   
 
<pre>{| class="wikitable mw-collapsible" id="mw-customcollapsible-myTable"
 
<pre>{| class="wikitable mw-collapsible" id="mw-customcollapsible-myTable"
Linia 127: Linia 127:
   
 
== Zobacz również ==
 
== Zobacz również ==
* [[w:c:dev:ShowHide|ShowHide]] w [[w:c:dev|Developer's Wiki]]
+
* [[w:c:dev:ShowHide|ShowHide]] na [[w:c:dev|Dev Wiki]]
 
* [[mw:Manual:Collapsible elements|Collapsible elements]] w [[mw:|MediaWiki.org]]
 
* [[mw:Manual:Collapsible elements|Collapsible elements]] w [[mw:|MediaWiki.org]]
   
Linia 138: Linia 138:
 
[[pt:Ajuda:Collapsing]]
 
[[pt:Ajuda:Collapsing]]
 
[[ru:Справка:Сворачивание]]
 
[[ru:Справка:Сворачивание]]
  +
[[tr:Yardım:Daraltma]]
 
[[uk:Довідка:Таблиці/що згортаються]]
 
[[uk:Довідка:Таблиці/що згортаються]]
 
[[zh:Help:摺疊]]
 
[[zh:Help:摺疊]]
 
 
[[Kategoria:Edycja]]
 
[[Kategoria:Edycja]]
 
[[Kategoria:Pomoc]]
 
[[Kategoria:Pomoc]]

Wersja z 15:23, 29 gru 2019

Zwijanie jest opcją do pokazywania (lub ukrywania) elementów HTML.

Kiedy strona zawiera wiele powiązanych ze sobą elementów, które sprawiają, że strona ta jest ​​bardzo długa, można użyć zwijania, funkcja ta pozwala redaktorom na skrócenie strony i umożliwienie czytelnikom na rozwinięcie obszarów, które ich interesują. Podobnie do spisu treści, inne elementy wiki mogą być zaprojektowane do zwijania.

Aby stworzyć zwijany element, wystarczy dodać do niego klasę „mw-collapsible”.

Przykłady

Zwijanie tabeli

Dodając "mw-collapsible" jako klasę, można zwinąć tabelę oszczędzając miejsce.

Numer Litera
1 A
2 B
3 C
{| class="wikitable mw-collapsible" style="float:right"
! Numer !! Litera
|-
| 1 || A
|-
| 2 || B
|-
| 3 || C
|}

Zwijanie tekstu

Możliwe jest również zwijanie tekstu w artykułach, skutecznie skracając stronę i pozwalając czytelnikowi zdecydować, czy chce przeczytać resztę informacji. Dla przykładu:

<div class="mw-collapsible">
Ten tekst jest zwijany.
</div>

Daje w rezultacie:

Ten tekst jest zwijany.

Zaawansowane ustawienia

Stan początkowy

Aby ustawić stan początkowy dla zwijanego elementu można się posłużyć klasą „mw-collapsed” oraz „mw-collapsible”, przykład można ujrzeć poniżej:

{| class="mw-collapsible mw-collapsed wikitable"
! Nagłówek || pozostaje widoczny
|-
| Ta zawartość || jest ukryta
|-
| podczas || pierwszego ładowania
|}
Nagłówek pozostaje widoczny
Ta zawartość
jest początkowo ukryta

Wybieranie zawartości zwijania

Można również określić, która część zawartości może być zwijana używając „mw-collapsible-content”.

<div class="mw-collapsible mw-collapsed" style="width:100%">
Ten tekst nie jest zwijany; ale następny jest zwijany i ukryty domyślnie:
<div class="mw-collapsible-content">Ten tekst powinien być ukryty domyślnie.</div>
Ten tekst powinien być również widoczny
</div>

Co da w rezultacie:

Ten tekst nie jest zwijany; ale następny jest zwijany i ukryty domyślnie:

Ten tekst powinien być ukryty domyślnie.

Ten tekst powinien być również widoczny

Niestandardowe nazwy

Nie lubisz Rozwiń/Zwiń w linkach? Nie ma problemu! Zmień to używając „data-expandtext” i „data-collapsetext”.

{| class="wikitable mw-collapsible" data-expandtext="Illuminati" data-collapsetext="Deluminati"
!Mój || Nagłówek
|-
| A || B
|-
| C || D
|}
Mój Nagłówek
A B
C D

Przycisk przełączania

Jeśli zauważysz na przykładzie powyższej tabeli, że link w drugiej kolumnie zwiększa szerokość tabeli w stosunku do tekstu zawartego w nim. Można ustalić, aby przełącznik był umieszczony w innym miejscu na stronie.

Aby to zrobić musimy przypisać ID do elementu. To ID musi być poprzedzone prefiksem „mw-customcollapsible-”, a następnie należy dodać unikalny tekst dla tego elementu. Korzystanie z powyższej tabeli, możemy dodać ID „mw-customcollapsible-myTable”.

Który zajmuje się samą tabelą. Następnie, możemy dodać przycisk/link/tekst z klasą „mw-customtoggle-myTable” (należy pamiętać, że class (klasa) i ID muszą mieć taki sam unikalny tekst).

{| class="wikitable mw-collapsible" id="mw-customcollapsible-myTable"
!Mój || Nagłówek
|-
| A || B
|-
| C || D
|}

<div class="mw-customtoggle-myTable wikia-menu-button">Pokaż/Ukryj tabelę</div>
Mój Nagłówek
A B
C D

Pokaż/Ukryj tabelę

Zobacz również