Konuyla ilgili bir önceki yazımızda CSS özellik seçicilerini kullanarak daha erişilebilir ve kullanıcı dostu linkler oluşturmuştuk ve ne yazık ki IE6’nın kodlarımızı algılamadığını birlikte tecrübe etmiştik. CSS kullanarak yaptığımız bu işi, bu sefer JQuery kullanarak gerçekleştireceğiz.

XHTML içeriğimizi oluşturalım;

<p>Lorem ipsum dolor <a href="http://www.yahoo.com">YAHOO</a>,
consectetur <a href="#">adipiscing elit</a>. Vestibulum scelerisque.
consectetur <a href="http://www.herhangibiryer.com/herhangibirdosya.pdf">adipiscing elit</a>. Vestibulum scelerisque.
<a href="http://www.adobe.com">ADOBE</a> pharetra asapien vel
<a href="herhangibirdosya.doc">turpis</a>,
<a href="herhangibirdosya.pdf">Aliquam nisi</a> eros, luctus tincidunt,
dignissim eget</p>

Şimdi, bir önceki yazımızda yaptığımız işi JQuery ile yapmak için yine CSS’i, ama bu sefer CSS sınıf seçicilerini kullanacağız. Sınıf seçicileri hakkında detaylı bilgiye şu yazımdan ulaşabilirsiniz.

/* Genel link tanımlamamız */
a{
	color:#06F;
	text-decoration:underline;
}

/* Genel link :hover durumu tanımlamamız */
a:hover{
	color:#0CF;
	text-decoration:noner;
}

/* Genel Harici Link Sınıfı */
a.hariciLink {
	background:url(harici.gif) no-repeat right top;
	padding:0 13px 0 0;
}

/* PDF Link Sınıfı */
a.pdfLink {
	background:url(pdf.gif) no-repeat right top;
	padding:0 15px 0 0;
}

/* Word Link Sınıfı */
a.wordLink {
	background:url(word.gif) no-repeat right top;
	padding:0 15px 0 0;
}

/* Harici PDF Link Sınıfı */
a.pdfHariciLink {
	background:url(pdfexternal.gif) no-repeat right top;
	padding:0 25px 0 0;
}

Burada her bir sınıf kuralımızı, her bir link tipi için hazırladık. Şimdi JQuery ile kodumuzu yazalım;

<script type="text/javascript" src="jquery-131min.js"></script>
<script type="text/javascript">

//DOM Kullanılmak İçin Hazır
$(function() {
	//İlgili Linkleri Seçip
	//Uygun Sınıfları Atadık.
	$('a[href^="http"]').addClass('hariciLink');
	$('a[href$=".pdf"]').addClass('pdfLink');
	$('a[href$=".doc"]').addClass('wordLink');
	$('a[href$=".pdf"][href^="http"]').addClass('pdfHariciLink');

});
</script>

Örneğin son haline buradan ulaşabilirsiniz.

Kod üzerinde de açıklamış olduğum gibi, her bir durum için linklerimizi JQuery ile seçip, ilgili sınıfları bu linkler için atamış olduk. Dikkat ederseniz JQuery kütüphanesiyle seçim yaparken aslında CSS Seçicilerini direk olarak kullanmış olduk.  Bu JQuery’nin  çok önemli bir avantajı…

Sonuç

Burada kullandığımız yöntem IE6′da da sorunsuz çalışmakla beraber, bence kendi içerisinde mantıksal problemler taşıyor. Normal koşullarda sunuma dair olan ve CSS ile yapılabilen bir uygulamayı, sırf IE6  nedeniyle Javascript  ile yapmamız aslında yanlış görünüyor, ama bu tarz sorunlar yaşayan geliştiriciler için çözüm oluşturduğundan not almakta fayda var.

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