JQuery ile Kullanıcı Dostu Linkler JQuery ile Kullanıcı Dostu Linkler

JQuery ile Kullanıcı Dostu Linkler Oluşturun

Sitenizde bağlantı türlerine göre linklerinizi şekillendirebilirsiniz. Demo örneğine bakarak nasıl olduğunu görebilirsiniz.

Css dosyanızın en altına ekleyin
/* 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;
}

header.tpl dosyanızda uygun bir yere ekleyin.
<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>

Demo: http://www.oztecnic.com/wp-content/uploads/2009/03/userfriendlylinks_jquery.html


1. fedai  11. Februar 2010, 00:33
simgeleri unutmuşsun
2. Gökhan YILDIZ  11. Februar 2010, 00:54
simgeleri demo sayfasından alabilirsiniz.
Nur registrierte Benutzer können Kommentare schreiben