by Dave Reeder
20. September 2009 00:47
Imagine you want to easily and consistently style links in different ways depending on the type of link. You may want email address links to look different to external links, and even style links to documents such as Word or PDF documents.
jQuery has attribute selectors to allow us to do this:
$('a[href^="mailto:"]').addClass("mailto"); // Select link(s) where the href attribute starts with "mailto:"
$('a[href$=".pdf"]').addClass("document"); // Select link(s) where the href attribute ends with ".pdf"
$('a[href*="mywebsite.com"]').addClass("externallink"); // Select link(s) containing "mywebsite.com" within their href attribute"
Some other selectors are available see http://docs.jquery.com/Selectors.
To use these selectors we first define our CSS classes using standard CSS. In this case I have produced different icons for each type of link.
Then we apply them using out attribute selectors in our document ready function:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<style type="text/css">
body {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #444; width: 600px}
p {margin: 20px}
a {color:#3366FF; font-weight: bold; text-decoration: none}
a.document {
padding: 2px 0 2px 40px;
background: url(images/document.gif) 12px 0 no-repeat
}
a.externallink {
padding: 2px 0 2px 40px;
background: url(images/external-site.gif) 14px 0 no-repeat
}
a.mailto {
padding: 2px 0 2px 40px;
background: url(images/mailto.gif) 12px 0 no-repeat
}
</style>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a[href^="mailto:"]').addClass("mailto");
$('a[href$=".pdf"]').addClass("document");
$('a[href*="mywebsite.com"]').addClass("externallink");
});
</script>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate, felis vitae luctus fringilla, sem libero pretium arcu, sit amet porta velit turpis in justo. Suspendisse interdum dolor eu dolor faucibus in sagittis sapien rhoncus. Quisque euismod pharetra tristique. Vestibulum ligula diam, congue vel vulputate eu, adipiscing at dolor. </p>
<p>
<a href="mailto:dave@test.com">Email Dave</a>
<a href="mailto:john@test.com">Email John</a>
<a href="mailto:emma@test.com">Email Emily</a>
</p>
<p>For more information, see the following TPS Reports:</p>
<p>
<a href="rep-one.pdf">Report One</a>
<a href="rep-two.pdf">Report Two</a>
<a href="summary.pdf">Summary</a>
</p>
<p>You can also read more on the <a href="http://www.mywebsite.com/information/">external web site</a>.</p>
</body>
</html>
And the finished example: