jQuery Plugin To Set Rel And Target Attributes For Links - Externalize

jQuery Plugin To Set Rel And Target Attributes For Links - Externalize
File Size: 38.3 KB
Views Total: 347
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Externalize is a lightweight jQuery plugin that dynamically set the Name, Relation, Target and Title attributes for links within the document. Typical use case for this plugin is to open the external link in a new widow, with the rel="external" attribute.

Installation:

# Yarn
yarn add jquery-externalize

# NPM
$ npm install jquery-externalize

How to use it:

1. Load both jQuery library and the Externalize plugin's script at the end of the document.

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

2. Initialize the plugin on the links and done.  The plugin will open the links in a new window and Add a short description to the link’s title attribute.

$('.ref a').externalize();

3. This will convert the a link:

<a href="https://www.jqueryscript.net/">Vestibulum dui diam</a>

4. Into...

<a href="https://www.jqueryscript.net/"rel="external" title="Opens in a new window" target="external">Vestibulum dui diam</a>

5. Default configuration options.

$('.ref a').externalize({

  // (string) name of the external window
  name:     "external", 

  // (bool) use the "target" HTML attribute to support Firefox tab handling and Safari status bar info
  target:   true, 

  // (string) apply CSS classes to an external link
  classes:  "", 

  // (string) apply a relationship to an external link
  relation: "external", 

  // (string) text added as or appended to the "title" attribute to inform the user about an upcoming new window
  title:    "Opens in a new window" 

});

Change log:

2017-07-31


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