Manual:Daraltabilir ögeler
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.
Skin:Minerva Neue üzerinde çalışmıyor (phab:T111565).
Please note that the built-in search of browsers doesn’t find content in collapsed elements (phab:T327893).
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 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ç:
| Lorem | ipsum |
| dolor | sit |
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
|}
| 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.
| 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ç:
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ç:
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:
Custom toggle link placement
| MediaWiki sürümü: | ≥ 1.41 |
You can control where inside the collapsible element the toggle link goes by placing an element with the class mw-collapsible-toggle-placeholder inside it.
The placeholder will be completely replaced with a standard toggle link, at the exact position in the DOM where you put the placeholder.
See the advanced demo for an example.
You will want to combine this with a specified collapsible part (see above), and put the placeholder outside the mw-collapsible-content element, to ensure that the toggle is still reachable in the collapsed state.
Özel geçiş bağlantısı ile
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
Additional toggle link
Başka bir ögenin içinde
Tablo gibi diğer ögelerde daraltılabilir ögeleri de kullanabilirsiniz.
| Title | Sample | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Lorem | Ipsum | ||||||||
| More info |
|
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;
}