Javascript ile Geçerli target

Tarih : 6 February, 2009 ::
Kategori : Javascript/JQuery
:: Etiketler : Javascript, JQuery, W3C, Web Standartları

XHTML Strict target Sorunu isimli yazımda, Strict formundaki DTD’lerde target özelliğinin geçerlilik testinden geçmemesi konusu ve alternatif çözüm yollarına değinmiştim. Bu noktada standartlardan ödün vermek istemeyen, ama target özelliğini de kullanmak isteyen web geliştiricilerinin imdadına Javascript yetişiyor.

İlk olarak ham Javascript kullanarak linklerimizi yeni pencerede açtıralım. Her zamanki gibi önce XHTML içeriğimizi oluşturalım.

<p>Lorem ipsum <a href="http://www.yahoo.com" rel="disari">
dolor sit amet</a>, consectetur adipiscing elit. <a href="#">Aliquam at sem</a>.
Aenean quis neque eu quam euismod commodo. Quisque dictum. Pellentesque vitae lectus.
Duis non dolor. Morbi vehicula leo ut purus.
<a href="http://www.adobe.com" rel="disari">Curabitur</a>
 ut quam. Quisque vehicula. Donec placerat, mi sollicitudin pellentesque congue,</p>

Yukarıda da görüldüğü gibi bir paragraf etiketinin içerisinde üç adet link (a) bulunmakta. Bunlardan ikisi harici bağlantılara giderken, bir tanesi dâhili bir sayfaya gidiyor. Harici linkleri javascript kullanarak seçebilmek için rel özelliğini kullanıyoruz. rel özelliğiyle, bir linkin hedef adresi ile olan ilişkisini tanımlarız.

Javascript kodumuzu yazarsak;

<script type="text/javascript">
<!--
	// Javascript fonksiyonumuzu tanımlıyoruz
	var yenipencere = function () {

		//sayfadaki bütün linkleri seçiyoruz
		var linkler = document.getElementsByTagName('a');

		//bütün linkler içerisinde arıyoruz...
		for (var i=0; i<linkler.length; i++) {
			var Link =linkler[i];

			// eğer linkin rel özelliği 'disari' ya eşitse
			if(Link.getAttribute("rel") == 'disari') {
				Link.target ="_blank";	//linki yeni pencerede açıyoruz
			}
		}
	}

window.onload = yenipencere; // sayfa yüklendikten sonra çalıştırıyoruz...
-->
</script>

Kod üzerinde javascript kodunu açıklamaya çalıştım. Çalışan uygulamaya buradan ulaşabilirsiniz.

Şimdi, ham javascript ile yaptığımız bu işi JQuery kütüphanesini kullanarak yapalım…

<script type="text/javascript" src="jquery-131min.js"></script>
<script type="text/javascript">
<!--
// Sayfa yüklendikten sonra çalış
$(function() {

	//rel = 'disari' olan bütün linkleri seç
	$('a[rel=disari]')
		.click(function() {	//linklere tıklandığında
			this.target="_blank"; //tıkladığını yeni pencerede aç
		 });

});
-->
</script>

Çalışan uygulamaya buradan ulaşabilirsiniz.

Böylece aynı işi gören iki javascript programcığı yazmış olduk. Dikkat edilirse JQuery kullanılarak aynı kodu, çok daha okunabilir ve kısa olarak yazmış olduk.

Sonuç

Bu şekilde Javascript kullanarak hem uygulamamızda target özeliğini kullanabiliyoruz, hem de W3C geçerlilik testinden sorunsuz geçmiş oluyoruz. Fakat burada gözden kaçmaması gereken önemli bir nokta var; o da, kullanıcıyı linki yeni pencerede açmaya zorlamamız. Bu noktada erişilebilirlik çerçevesinde düşündüğümüzde, yaptığımız sadece W3C’yi kandırmak olsa gerek.

Hemen Paylaş!

Fırından yeni çıkmış yazılardan haberdar olmak için RSS yayınıma abone olabilir ya da beni Twitter'dan takip edebilirsiniz.

Yorumla Bakalım

Yorumlara Git

Daha Fazlasını Oku!

Makale Detayı

Bu Makale için toplam 8 adet yorum bulunmaktadır...

Bu Makale 6 February, 2009 ve saat 14:36 itibariyle Javascript/JQuery kategorisi altına kaydedilmiştir. Bu makale ile ilgili yorumları RSS 2.0 beslemesinden takip edebilirsiniz.. Bu makale için yorum yapabilir, veya kendi web sitenize trackback sağlayabilirsiniz...