Manual:Daraltabilir ögeler

From mediawiki.org
This page is a translated version of the page Manual:Collapsible elements and the translation is 100% complete.
MediaWiki offers collapsible classes out of the box for MediaWiki 1.18 and higher. For earlier community versions, see this revision.

jQuery.makeCollapsible

Nasıl çalıştığı hakkında daha fazla bilgi için jQuery.makeCollapsible belgelendirmesine de bakın.
Ayrıca bakınız: Daha fazla örnek için Manual:Collapsible elements/Demo/Advanced .

Bu modül, MediaWiki 1.18 ve üzeri sürümlerde varsayılan olarak MediaWiki çekirdeğindedir. Bu modül varsayılan olarak MediaWiki ile birlikte gelir. Bir vikiye kopyalamanız gerekmez. The source (if you're interested) is in the repository for mediawiki-core (resources/src/jquery/jquery.makeCollapsible.js and resources/src/jquery/jquery.makeCollapsible.css).

mw-collapsible sınıfını tetiklemek için herhangi bir öğeye (div, table, list, herhangi bir şey) ekleyin.

Mobil üzerinde çalışmıyor (phab:T111565).

Tablo

Bir tablo, diğer herhangi bir öge gibi daraltılabilir. Aradaki fark, tablonun bir kısmının daraltıldığında bile görünür kalmasıdır. Altyazılı bir tablo, başlığı görünür tutar:

{| class="mw-collapsible"
|+ Başlık
|-
! scope="col" | Başlık 1
! scope="col" | Başlık 2
|-
| Veri 1
| Veri 2
|}
Başlık
Başlık 1 Başlık 2
Veri 1 Veri 2

Başlık olmayan bir tablo ilk satırı görünür tutar:

{| role="presentation" class="mw-collapsible"
|-
| Lorem
| ipsum  
|-
| dolor
| sit
|}

Sonuç:

Belirtilen başlangıç durumuyla

Sayfayı yüklediğinizde içeriğin varsayılan olarak daraltılması için mw-collapsible üzerinden sonra mw-collapsed ekleyebilirsiniz.

İlk durumu daraltılmış olarak ayarlamak için aşağıdaki tabloda görüldüğü gibi "mw-collapsed" ekleyin:

{| class="mw-collapsible mw-collapsed wikitable"
! colspan="2" | The header remains visible.  
|-
| This  content || is hidden
|-
| at first || load time
|}
The header remains visible.  
This content is hidden
at first load time
{| class="mw-collapsible mw-collapsed wikitable"
|+ style=white-space:nowrap | The caption remains visible. 
|-
! Text !! More text
|-
| This  content || is hidden
|-
| at first || load time
|}
The caption remains visible.
Text More text
This content is hidden
at first load time

Daraltılmış bir tablo olduğunu görmeyi kolaylaştırmak için başlığın etrafına dolgulu bir kenarlık ekleyebilirsiniz:

|+ style="white-space:nowrap; border:1px solid; padding:3px;" | The caption remains visible. 
The caption remains visible.
Text More text
This content is hidden
at first load time

Temel

<!-- overflow:auto; to fix collapsed display, because the toggle link has float:right; -->
<div class="toccolours mw-collapsible" style="width:400px; overflow:auto;">
This text is collapsible. {{Lorem}}
</div>

Sonuç:

This text is collapsible. 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.

data-collapsetext ve data-expandtext özniteliklerini kullanarak, betik tarafından eklenen geçiş etiketleri için özel bir metin tanımlanabilir. Vikimetine eklendiğinde, bunlar aşağıdaki gibi yerelleştirilmiş bir mesajla doldurulabilir:

<div class="mw-collapsible" data-expandtext="{{int:show}}" data-collapsetext="{{int:hide}}">

Başlıklı basit

<div class="toccolours mw-collapsible" style="width:400px; overflow:auto;">
<div style="font-weight:bold;line-height:1.6;">Lorem ipsum sample</div>
<div class="mw-collapsible-content">
This text is collapsible. {{Lorem}}
</div></div>

Sonuç:

Lorem ipsum sample
This text is collapsible. 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.

Belirtilen daraltabilir parça ile

Varsayılan olarak, daraltılabilir bir tablo dışı öge tamamen daraltılır.

Bazı içerikleri daraltıldığında bile görünür tutmak için hangi bölümün daraltılabilir içerik olduğunu belirtebilirsiniz.

<div class="toccolours mw-collapsible mw-collapsed">
This text is not collapsible; but the next is collapsible and hidden by default:
<div class="mw-collapsible-content">{{Lorem}}</div>
</div>

Sonuç:

This text is not collapsible; but the next is collapsible and hidden by default:

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.

Özel geçiş bağlantısı ile

Bu yönteme erişilemez ve ekran okuyucu kullanıcıları için kafa karıştırıcıdır. Kullanmaktan kaçının

Betiğin ögenize varsayılan geçiş bağlantısını (özel bir etiketle olsun veya olmasın) koymasını istemiyorsanız, kendinizden bir tane oluşturabilirsiniz. Bu, daraltılabilir ögenin veya dışında herhangi bir yerde bulunabilir. Its relationship to the collapsible element is detected by using an ID attribute with the prefix mw-customcollapsible and a corresponding class attribute with prefix mw-customtoggle for the collapsible element and the togglelink respectively.

<span class="mw-customtoggle-myDivision">Toggle link</span>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision">Toggled text</div>
<span class="mw-customtoggle-myDivision">Additional toggle link</span>

Sonuç:

Toggle link

Toggled text

Additional toggle link

Başka bir ögenin içinde

Tablo gibi diğer ögelerde daraltılabilir ögeleri de kullanabilirsiniz.

My table with collapsible info
Title Sample
Lorem Ipsum
More info
Number Letter  
1 A
2 B
3 C

Geçiş bağlantısını sola taşıyın

Daraltılabilir tablolardaki veya ögelerdeki geniş resimler ve uzun çıplak URL'ler, genişletildiğinde geçiş bağlantısının ekran dışına çıkmasına neden olabilir. Örneğin cep telefonlarında. Bazen tıklamak ve kapatmak için geçiş bağlantısına gitmek zor veya imkansızdır. Aşağıdaki CSS, geçiş bağlantısını tamamen sola yerleştirir ve metinle sağındaki metin arasında biraz boşluk bırakır. Tablo veya öge genişletilirken veya daraltılırken geçiş bağlantısı konumu değişmez. Place the CSS in common.css by editing page "MediaWiki:common.css". Also edit mobile.css if you are importing jquery.makeCollapsible into mobile.js. For examples see common.css, mobile.js, and mobile.css

/* Collapsible elements. Toggle-link moved to left.
/* Margin around it adjusted. */

.mw-collapsible span.mw-collapsible-toggle {
    float:left;
    margin-left:0;
    margin-right:1em;
}

Parantezleri geçişten kaldırma

Varsayılan veya özel etiket geçiş bağlantılarında köşeli ayraçları gizlemek istiyorsanız (estetik veya başka nedenlerle):

.mw-collapsible-toggle-default:before, .mw-collapsible-toggle-default:after {
    display: none;
}

Ayrıca bakınız