Helpo:Kaŝeblaj elementoj

El Kitakujo

(Malsamoj inter versioj)
Iri al: navigado, serĉi
E (Vidu ankaŭ: korekto interwiki, ĉar estas kombinita artikolo)
E (NavFrame divs: traduko)
Linio 193: Linio 193:
===Kiel uzi===
===Kiel uzi===
====NavFrame divs====
====NavFrame divs====
-
La baza koncepto ĉi ite estas uzi la [[Span and div|'''div''']] [[HTML elemento|elementon]] ene de Vikia artikola marka kodo por identigi certan enhavon (which we'll call the "details" here), pri kiu ni volas, ke la uzanto havas eblecon por "montri" axu "kaŝi" ĝin. La uzata markkodo por realigi ĉi tiun efikon entenas tri ĉefajn klasojn: <tt>'''NavFrame''', '''NavHead''', '''NavContent'''</tt>. La defaŭlta aranĝo de ĉi tiu kodo komence "montras" la detalojn, same bone kiel liigilon por "kaŝi" la detalojn. <!--To reverse the default behavior, so that the details are initially hidden,  the NavContent element can be declared with <tt>style="display:none;"</tt>.-->
+
La baza koncepto ĉi tie estas uzi la [[Span and div|'''div''']] [[HTML elemento|elementon]] ene de Vikia artikola marka kodo por identigi certan enhavon (which we'll call the "details" here), pri kiu ni volas, ke la uzanto havas eblecon por "montri" axu "kaŝi" ĝin. La uzata markkodo por realigi ĉi tiun efikon entenas tri ĉefajn klasojn: <tt>'''NavFrame''', '''NavHead''', '''NavContent'''</tt>. La defaŭlta aranĝo de ĉi tiu kodo komence "montras" la detalojn, same bone kiel liigilon por "kaŝi" la detalojn. <!--To reverse the default behavior, so that the details are initially hidden,  the NavContent element can be declared with <tt>style="display:none;"</tt>.-->
=====Simpla ekzemplo=====
=====Simpla ekzemplo=====
Linio 210: Linio 210:
</div>
</div>
-
 
+
<!--
Por komence kaŝi la enhavon faru tion:
Por komence kaŝi la enhavon faru tion:
<source lang="html4strict"><div class="NavFrame collapsed">
<source lang="html4strict"><div class="NavFrame collapsed">
Linio 224: Linio 224:
   </div>
   </div>
</div>
</div>
 +
-->
 +
<!-- The following note may be safely removed 30 days after 23 September 2008.
 +
(Note: The "collapsed" class is a recent feature.  If the content above does not appear initially hidden, try [[WP:BYPASS|clearing your browser JavaScript cache]].)-->
-
<!-- The following note may be safely removed 30 days after 23 September 2008. -->
+
=====Ekzemplo kun miksaj klasoj=====
-
(Note: The "collapsed" class is a recent feature.  If the content above does not appear initially hidden, try [[WP:BYPASS|clearing your browser JavaScript cache]].)
+
Vi povas krome apliki aliajn klasojn apud la menciitaj, farante pli stilan desajnon prefere al tio ke vi uzus la normalajn klasojn:
-
 
+
-
=====Mixed classes example=====
+
-
You can even apply other classes along with these, making a more styled design rather than if you were to use the standard classes:
+
<source lang="html4strict"><div class="messagebox standard-talk NavFrame">
<source lang="html4strict"><div class="messagebox standard-talk NavFrame">
   <div class="somerandomclass NavHead">
   <div class="somerandomclass NavHead">
-
     [... This is the title; it does not have to be plain text, you can get creative here ...]</div>
+
     [... Tio estas la titolo; ĝi ne devas esti nura teksto, vi povas esti kreativa ĉi tie ...]</div>
   <div class="NavContent anotherclass">
   <div class="NavContent anotherclass">
-
     [... The content you want to hide goes here ...]
+
     [... La enhavo, kiun vi volas kaŝi, sekvu ĉi tie ...]
   </div>
   </div>
</div></source>
</div></source>
<div class="messagebox standard-talk NavFrame">
<div class="messagebox standard-talk NavFrame">
   <div class="somerandomclass NavHead">
   <div class="somerandomclass NavHead">
-
[... This is the title; it does not have to be plain text, you can get creative here ...]</div>
+
[... Tio estas la titolo; ĝi ne devas esti nura teksto, vi povas esti kreativa ĉi tie ...]</div>
   <div class="NavContent anotherclass">
   <div class="NavContent anotherclass">
-
[... The content you want to hide goes here ...]
+
[... La enhavo, kiun vi volas kaŝi, sekvu ĉi tie ...]
   </div>
   </div>
</div>
</div>

Kiel registrite je 17:59, 24. Nov 2008

Ŝablono:Redaktata

Kaŝeblaj elementoj provizas manieron kaŝi kaj malkaŝi tabelon aŭ blokon se kaŝi/montri butono estas klakata. La kodo por ĉi tiu funkcio troviĝas en MediaWiki:Common.js.

La komenca stato de iu kaŝebla enhavero povas esti difinata uzante "collapsible table" (por tabeloj), ĉar tio ankaŭ permesas tabelon kun nur unu elemento kun enhavo, kaj kaplinio.

Tia distingo ĉe blokoj nur eblas per la CSS-klasado. Do, se estas metata la klaso "NavFrame" kune kun "NavHead" kaj "NavContent" ĉi tiu kaŝebleco estas uzebla.

Enhavo

Tabelo

Simpla ekzemplo

Kun tabeloj estas pli facile labori, ĉar vi nur devus aldoni collapsible klason al la koncernata tabelo. Por aperigi la [kaŝi]/[montri] ligilon, la unu linio de la tabelo devas esti kaplinio, tio estas, unu el la ĉeloj en la unua linio devas estas difinata kun vokosigno (en vikia sintakso). La uzo de la klaso wikitable en la ekzemplo malsupre estas nur por konveneco; ĝi ne estas deviga por ke collapsible funkciu.

Tajpenda kodo Rezulto
{| class="wikitable collapsible"
! Simpla kaŝebla tabelo
|-
| Lorem ipsum dolor sit amet
|}
Simpla kaŝebla tabelo
Lorem ipsum dolor sit amet

Uzante la sintakson supre, kaŝeblaj tabeloj ofte estas uzata por ĉiam montri enkondukon al, aŭ resumon de, longega diskuto aŭ sekcio de enhavo, dum kaŝado de plej multo de tiu enhavo de rekta rigardo. La resuma mesaĝo estas metata en la kaplinian ĉelon, kaj la enhavo estas metata en la tabelkorpan ĉelon. La enhavo estas tiam facile akcesebla per klakado de 'montri' butono. La kaŝebleca funkcieco estas ankaŭ disponebla en pli larĝaj kaj pli komplikaj tabeloj, tiel longe ke tie estas kaplinia ĉelo en la unua linio de la tabelo.

Tajpenda kodo Rezulto
{| class="wikitable collapsible"
 |Normala ĉelo en la kaplinio
 ! colspan="2"| Kapa ĉelo okupas du kolumnojn
 |-
 | colspan="2" | Lorem ipsum dolor sit amet
 | Kroma tabelkorpa ĉelo
 |}
Normala ĉelo en la kaplinio Kapa ĉelo okupas du kolumnojn
Lorem ipsum dolor sit amet Kroma tabelkorpa ĉelo

Kaŝado de tabeloj defaŭlte

Ĵus uzante la collapsible klason produktas tabelon kiu estas malkaŝata defaŭlte, sed povas esti kaŝata de la leganto. Estas ankaŭ eble krei tabeloj kiuj estas collapsed defaŭlte, kaj povas esti opcie malkaŝataj. Ekzistas certaj metodoj por fari tion, depende de la situacioj en kiuj vi volas kaŝigi la tabelon.

'collapsed'

Aldono de collapsed klaso kaŭzas ke tabelo estas ĉiam komence kaŝita. Ĝi estas la plej simpla metodo por fari tiel. Uzado de ekzemploj malsupre:

Tajpenda kodo Rezulto
{| class="wikitable collapsible collapsed"
! Simpla kaŝebla tabelo
|-
| Lorem ipsum dolor sit amet
|}
{| class="wikitable collapsible collapsed"
 |Normala ĉelo en la kaplinio
 ! colspan="2"| Kaplinia ĉelo okupas du kolumnojn
 |-
 | colspan="2" | Lorem ipsum dolor sit amet
 | Kroma tabelkorpa ĉelo
 |}

'autocollapse'

Aldono de autocollapse klaso kaŭzas ke tabelo kaŝiĝas se ekzistas pli ol antaŭdifinita nombro de kaŝeblaj tabeloj sur la paĝo. En eo.wiki, ĉi tiu antaŭdifino estas metata sur 0. La ekzemplo malsupre tial kaŝiĝas ĉar ekzitas pliaj kaŝeblaj tabeloj sur la paĝo.

Code entered Output produced
{| class="wikitable collapsible autocollapse"
! Simpla kaŝebla tabelo
|-
| Lorem ipsum dolor sit amet
|}
Simpla kaŝebla tabelo
Lorem ipsum dolor sit amet

'innercollapse' and 'outercollapse'

Using this pair of classes, it is possible to make a table collapsed by default only when it is contained within a particular object, such as another table.

Code entered Output produced
{| class="wikitable outercollapse"
! This table does not collapse
|-
| But the table inside this cell

{| class="wikitable collapsible innercollapse"
! Does collapse
|-
| Hiding this part
|}

|}
This table does not collapse
But the table inside this cell
Does collapse
Hiding this part

Pliaj notoj

Ordigeblaj tabeloj

Kaŝeblaj tabeloj povas esti kombinataj kun funkcieco de ordigeblaj tabeloj sen malfacilaĵo. Tamen, ĉar la kaŝi/montri butono estas metata en la unuan kaplinian ĉelon, ĝia pozicio povas aspekti iom strange se la tabelo ne estas sufiĉe larĝa:

Tajpenda kodo Rezulto
{| class="wikitable collapsible sortable"
!Nomo!!Poentoj
|-
|John||59
|-
|Jane||100
|-
|Bob||72
|}
Nomo Poentoj
John 59
Jane 100
Bob 72

Alĝustigo

Registeritaj uzantoj povas redakti their monobook.js dosieron por ŝanĝi kelkajn el uzataj variabloj.

autoCollapse = 4 //kiom da kaŝeblaj tabeloj sur la paĝo antaŭ ol memkaŝado ekas (defaŭlte=2)
var collapseCaption = 'faldi' //teksto de la [kaŝi] ligilo (defaŭlte='kaŝi')
var expandCaption = 'malfaldi' //teksto de la [montri] ligilo (defaŭlte='montri')

Blokoj

Por <div> (resp. </div>)- grupigo kun certaj klasoj ekzistas simila kodigo en MediaWiki:Common.js sekve priskribenda.

Kiel uzi

NavFrame divs

La baza koncepto ĉi tie estas uzi la div elementon ene de Vikia artikola marka kodo por identigi certan enhavon (which we'll call the "details" here), pri kiu ni volas, ke la uzanto havas eblecon por "montri" axu "kaŝi" ĝin. La uzata markkodo por realigi ĉi tiun efikon entenas tri ĉefajn klasojn: NavFrame, NavHead, NavContent. La defaŭlta aranĝo de ĉi tiu kodo komence "montras" la detalojn, same bone kiel liigilon por "kaŝi" la detalojn.

Simpla ekzemplo

Vi devos krei tri div elementoj:

<div class="NavFrame">
  <div class="NavHead">[... Tio estas la titolo de via kaŝebbla enhavo ...]</div>
  <div class="NavContent">
    [... La enhavo, kiun vi volas kaŝi, sekvas ĉi tie ...]
  </div>
</div>


Ekzemplo kun miksaj klasoj

Vi povas krome apliki aliajn klasojn apud la menciitaj, farante pli stilan desajnon prefere al tio ke vi uzus la normalajn klasojn:

<div class="messagebox standard-talk NavFrame">
  <div class="somerandomclass NavHead">
    [... Tio estas la titolo; ĝi ne devas esti nura teksto, vi povas esti kreativa ĉi tie ...]</div>
  <div class="NavContent anotherclass">
    [... La enhavo, kiun vi volas kaŝi, sekvu ĉi tie ...]
  </div>
</div>

Aliaj HTML elementoj

Por pliaj elementoj tia funkcieco ne estas uzebla, ĉar ne ekzistas la koncernataj funkcioj en MediaWiki:Common.js.

Vidu ankaŭ

Personaj iloj