| Gökhan YILDIZ |
|
|---|---|
|
User Friendly Links with jQuery
add your css file
/* to define the general link */
a{
color:#06F;
text-decoration:underline;
}
/* General link: hover state to define */
a:hover{
color:#0CF;
text-decoration:noner;
}
/* General External Link Class */
a.externalLink {
background:url(harici.gif) no-repeat right top;
padding:0 13px 0 0;
}
/* PDF Link Class */
a.pdfLink {
background:url(pdf.gif) no-repeat right top;
padding:0 15px 0 0;
}
/* Word Link Class */
a.wordLink {
background:url(word.gif) no-repeat right top;
padding:0 15px 0 0;
}
/* External PDF Link Class */
a.pdfexternalLink {
background:url(pdfexternal.gif) no-repeat right top;
padding:0 25px 0 0;
}
open your header.tpl and add to the appropriate place <script type="text/javascript" src="http://www.kralfutbol.com/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
//DOM Kullanılmak İçin Hazır
$(function() {
//Select the Related Links
//We have the appropriate Class Assignment.
$('a[href^="http"]').addClass('externalLink');
$('a[href$=".pdf"]').addClass('pdfLink');
$('a[href$=".doc"]').addClass('wordLink');
$('a[href$=".pdf"][href^="http"]').addClass('pdfexternalLink');
});
</script>
Demo: http://www.oztecnic.com/wp-content/uploads/2009/03/userfriendlylinks_jquery.html Gökhan YILDIZ
|