| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" | |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" > | |
| <head> | |
| <title>Create jQuery Custom Selector by www.dotnetcurry.com</title> | |
| <style type="text/css"> | |
| div | |
| { | |
| height: 200px; | |
| width: 250px; | |
| border: 1px solid black; | |
| } | |
| </style> | |
| <script type="text/javascript" | |
| src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"> | |
| </script> | |
| <script type="text/javascript"> | |
| $(function () { | |
| $.extend($.expr[':'], { | |
| mailToLink: function (obj) { | |
| return obj.href.match(/^mailto\:/); | |
| } | |
| }); | |
| $("#btnFindMailTo").click(function () { | |
| $("div a:mailToLink").css("color", "red"); | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <p>List of Links:</p> | |
| <div> | |
| <a href="http://www.sqlservercurry.com">SQL Tips</a><br /> | |
| <a href="mailto:fakeaddr@devcurry.com">fakeaddr@devcurry.com</a><br /> | |
| <a href="http://www.devcurry.com/">.NET Tips</a><br /> | |
| <a href="http://www.dotnetcurry.com">.NET Articles</a><br /> | |
| </div> | |
| <input id="btnFindMailTo" type="button" value="Find mailto: links" /> | |
| </body> | |
| </html> | |
We have defined a custom selector called :mailToLink to which we are passing an object, which is a collection of links. This selector looks for all anchor elements that contains an href attribute matching mailto.
That’s it. Our selector :mailToLink is ready and here’s how we can use it:
To test this selector, we have used some hyperlinks, out of which one of them is a mailto: link. When you click the button, we use our custom selector to indentify the :mailto link and set it’s color to red.
No comments:
Post a Comment