jQuery Plugin To Add Icons To External Links - External Links

jQuery Plugin To Add Icons To External Links - External Links
File Size: 3.49 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

external-links is a simple jQuery plugin that uses regular expression to identify External Links of your page and adds an CSS class to each link. So that you can add a little external link icon following the link text due to them having an CSS class.

See also:

Basic Usage:

1. Load the jQuery library and jQuery external-links plugin at the bottom of your web page to improve the load time.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="external-links.js"></script> 

2. Call the plugin on the links of your page.

<script type="text/javascript">
jQuery('.links').externalLinks();
</script>

3. By default the plugin will add a CSS class of 'external-link' to your External Links. So you can customize the styles in the CSS.

a.external-link {
background-image: url("external-link.png");
background-position: right center;
background-repeat: no-repeat;
padding-right: 20px;
}

4. Advanced usages.

// Select all external links on the page and give them a lovely yellow background color
jQuery('body').externalLinks().css('background-color', 'red');

// Select external links that are children of the element with an id of
// 'foo' and give each a custom class of 'bar'
jQuery('#foo').externalLinks({'class': 'bar'});

// Override the regex used to match URLs that are considered internal
jQuery('body').externalLinks({'re': /jqueryscript\.net/i});

Change log:

2014-03-11

  • Fix issue in IE due to use of reserved word 'class'

This awesome jQuery plugin is developed by AstunTechnology. For more Advanced Usages, please check the demo page or visit the official website.