Anchor Tag Enhancement Plugin For jQuery - Sweet-Links

File Size: 20 KB
Views Total: 325
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Anchor Tag Enhancement Plugin For jQuery - Sweet-Links

Sweet-Links is a tiny jQuery plugin that can add some cool features to anchor tags on your webpage.

Features:

  • Checks if the href points to a document, and if so, it will add a class that can be used for styling as well as the download attribute.
  • Checks if the href points to an anchor on the same page, and if so, smooth scroll to that anchor.
  • Checks if there is a title attribute, and if not it will add one using the text content of the link.
  • Checks if the href points to an external destination. If so, it will add a class that can be used for styling, the rel="external" attribute will be added, and if desired - an optional target="_blank" (disabled by default) will be added.

How to use it:

1. Sweet Links requires jQuery, so make sure this is referenced before Sweet Links.

<script src="//code.jquery.com/jquery.min.js"></script>

2. To add Sweet Links to your site, simply reference it after jQuery and then initialize it after document ready, as below:

<nav>
  <ul>
    <li><a href="#introduction">Introduction</a></li>
    <li><a href="#documentation">Documentation</a></li>
    <li><a href="#browser-support">Browser Support</a></li>
    <li><a href="#bugs">Bugs</a></li>
    <li><a href="#updates">Updates</a></li>
    <li><a href="#license">License</a></li>
  </ul>
</nav>
<script src="//code.jquery.com/jquery.min.js"></script>
$("a").sweetLinks();

3. Possible plugin options with default values.

$("a").sweetLinks({
  scrollTime : 1000, // in ms
  newWindow : false, // open links in new windows
  classPrefix : "sl-",
  fileTypes : ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "pdf", "pages", "keynote", "numbers"]
});

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