Şablon:Değiştirici/belge

Bu şablon, radyo düğmeleri aracılığıyla tanımlanan içerikler arasında geçiş yapmayı sağlamaktadır.

Kullanımı

Değiştirici içerisine eklenecek olan içerikler ve radyo düğmesi açıklamaları | ayırıcısı ile birbirlerinden ayrılarak art arda girilmelidir.

Örnek kullanım

{{Değiştirici
|İlk içerik metni|İlk içerik
|İkinci içerik metni|İkinci içerik
|Üçüncü içerik metni|Üçüncü içerik
}}

İlk içerik metni

İkinci içerik metni

Üçüncü içerik metni

Eğer varsayılan olarak görülmesi istenen içerik ilk sıradaki değilse |varsayılan= parametresi kullanılarak ilgili içeriğin sırası belirtilmelidir.

Örnek kullanım

{{Değiştirici
|İlk içerik metni|İlk içerik
|İkinci içerik metni|İkinci içerik
|Üçüncü içerik metni|Üçüncü içerik
|varsayılan = 2
}}

İlk içerik metni

İkinci içerik metni

Üçüncü içerik metni

Konum haritası ile kullanımı

Değiştirici, Konum haritası modülü ile uyumlu çalışmaktadır. Bu modülü kullanan şablonlardaki harita kısmına ilgili harita adlarını diyez işareti () ile ayırarak art arda girmek yeterlidir.

Örnek kullanım

{{Konum haritası|Türkiye İstanbul2#İstanbul#Türkiye
| float = none
| lat_deg = 41.008547
| lon_deg = 28.979939
| caption = [[Ayasofya]]
}}

Ayasofya

Değiştirici/belge (İstanbul)

Değiştirici/belge (Türkiye)

Çalışma mantığı

Şablon, Vikipedi'ye tanımlanan JavaScript betiğini temel alarak çalışır. Bir kapsayıcı öge (bu şablonda div ögesi kullanılsa da span vb. diğer ögelerle de kullanılabilir) oluşturularak buna "switcher-container" sınıfı tanımlanmış ve içerisine de maddelerde kullanılan |parametre=lere temel oluşturan <span class="switcher-label" style="display:none">Burada radyo düğmesi etiketi var</span> kodları girilmiştir. Değiştiriciye eklenen ilk içeriğin değil de daha sonraki bir içeriğin varsayılan olarak görülmesinin istendiği durumlar içinse data-switcher-default="" değeri tanımlanmıştır.

Kodlarla örnek kullanım

<div class="switcher-container">
	<div>
		İlk içerik metni<span class="switcher-label">İlk içerik</span>
	</div>
	<div>
		İkinci içerik metni<span class="switcher-label" data-switcher-default="">İkinci içerik</span>
	</div>
	<div>
		Üçüncü içerik metni<span class="switcher-label">Üçüncü içerik</span>
	</div>
</div>

İlk içerik metni

İkinci içerik metni

Üçüncü içerik metni